调试角Javascript代码，在batarang调试器的Model选项中未显示范围

Question

我不知道八达郎的天使的范围。我在调试angularjs上花了很多时间，但我无法获得范围。以下是html代码

    <div data-ng-controller="RegisterCtrl">
    <div ng-repeat="error in registerError">
        <div class="alert alert-danger animated fadeIn">{{error.msg}}</div>
    </div>
    <div class="alert alert-danger animated fadeIn" ng-show="usernameError">{{usernameError}}</div>
    <div class="alert alert-danger animated fadeIn" ng-show="emailError">{{emailError}}</div>

    <h1>Register</h1>
    <form ng-submit="register()" class="signup form-horizontal">
        <div class="form-group">
            <label for="name" class="col-md-4 control-label">Full Name</label>
            <div class="col-md-8">
                <input id="name" type="text" name="name" placeholder="Full name" class="form-control" ng-model="user.name"/>
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-md-4 control-label">Email</label>
            <div class="col-md-8">
                <input id="email" type="email" name="email" placeholder="Email" class="form-control" ng-model="user.email"/>
            </div>
        </div>
        <div class="form-group">
            <label for="username" class="col-md-4 control-label">Username</label>
            <div class="col-md-8">
                <input id="username" type="text" name="username" placeholder="Username" class="form-control" ng-model="user.username"/>
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-md-4 control-label">Password</label>
            <div class="col-md-8">
                <input id="password" type="password" name="password" placeholder="Password" class="form-control" ng-model="user.password"/>
            </div>
        </div>
        <div class="form-group">
            <label for="confirmPassword" class="col-md-4 control-label">Repeat Password</label>
            <div class="col-md-8">
                <input id="confirmPassword" type="password" name="confirmPassword" placeholder="Password" class="form-control" ng-model="user.confirmPassword"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-4 col-md-8">
                <button type="submit" class="btn btn-primary">Sign up</button>&nbsp;
                or&nbsp;<a ui-sref='auth.login' class="show-login">login</a>
            </div>
        </div>
    </form>
</div>

这里是angularjs控制器代码

'use strict';
angular.module('mean.users')
    .controller('RegisterCtrl', ['$scope', '$rootScope', '$http', '$location',
        function($scope, $rootScope, $http, $location) {
            $scope.user = {};

            $scope.register = function() {
                $scope.usernameError = null;
                $scope.registerError = null;
                $http.post('/register', {
                    email: $scope.user.email,
                    password: $scope.user.password,
                    confirmPassword: $scope.user.confirmPassword,
                    username: $scope.user.username,
                    name: $scope.user.name
                })
                .success(function() {
                    // authentication OK
                    $scope.registerError = 0;
                    $rootScope.user = $scope.user;
                    $rootScope.$emit('loggedin');
                    $location.url('/');
                })
                .error(function(error) {
                    // Error: authentication failed
                    if (error === 'Username already taken') {
                        $scope.usernameError = error;
                    } else if (error === 'Email already taken'){
                        $scope.emailError = error;
                    }
                    else $scope.registerError = error;
                });
            };
        }
    ]);

请告诉我哪里做错了。

Answer 1

当我使用节点包管理器在我的系统上正确地安装mean.io应用程序时，这个问题已经解决了。在此之前，问题在于我使用的是下载版本的github存储库。即使是现在，它也比以前运作得更好。我只是一个普通的堆栈应用程序的初学者，这就是为什么我无法识别出确切的问题并在没有明确理解的情况下发布它。

注意：不使用下载版本的mean.io git存储库。只需下载或安装使用(Npm)。

Answer 2

你怎么用八糖的？这是一个非常奇怪的工具。您必须移动指向箭头，单击"+"，然后选择元素，而不单击其他任何地方，展开范围值。

另一种技术是，启动了dev tools (当然)，右键单击元素并选择“”。然后，在控制台中，您可以键入angular.element($0).scope()以获得元素$0的作用域(您检查过的元素)。

Answer 3

我发现巴达朗真的很笨重。相反，我现在使用ng检查器(http://ng-inspector.org)，这是非常有用的。它更清楚地显示了我发现的东西。

另外，当您通过路由定义控制器时，最好使用控制器作为语法。它使控制器作用域显示在调试器中，并允许您对模板中的父作用域进行词法访问。超方便的。

希望这能帮上忙！