Question

我无法在batarang中获得angularjs的范围。我花了很多时间调试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

你如何使用batarang？这是一个非常奇怪的工具。您必须移动指向箭头，单击“+”，然后选择元素，而不单击任何其他位置，展开范围值。

另一种技术是，启动开发工具（当然），右键单击元素并选择“检查元素”。然后在控制台中，您可以键入angular.element($0).scope()以获取元素$ 0（您检查过的那个）的范围。

Answer 2

我发现Batarang真的很笨重。相反，我现在使用更有用的ng-inspector（http://ng-inspector.org）。它找到的东西要清楚得多。

另外一个很好的建议是在按路径定义控制器时使用控制器作为语法。它使您的控制器作用域显示在调试器中命名，并允许您对模板中的父作用域进行词汇访问。超级方便。

希望有所帮助！

Answer 3

当我使用节点包管理器在我的系统上正确安装mean.io应用程序时，问题已得到解决。在此之前，问题是因为我使用的是下载版本的github存储库。即使是现在它也比以前完美。我只是MEAN堆栈应用程序的初学者，这就是为什么我无法确定确切问题并在没有明确理解的情况下发布它。

注意：请勿使用已下载的mean.io git存储库版本。只需使用Node Packege Manager（npm）下载或安装即可。

调试Angular Javascript代码，不显示batarang调试器的Model选项中的范围

3 个答案: