我如何访问$范围变量在浏览器的控制台使用AngularJS?

我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?

我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。

当前回答

如果你已经安装了Batarang

然后你可以这样写:

$scope

当你在chrome的元素视图中选择了元素。参考- https://github.com/angular/angularjs-batarang#console

其他回答

在控制器的某个地方(通常最后一行是一个好地方)，放置

console.log($scope);

如果你想查看内部/隐式作用域，比如ng-repeat的内部，类似这样的方法可以工作。

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

然后在控制器中

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

注意，上面我们在父作用域中定义了showScope()函数，但这是可以的…子/内部/隐式作用域可以访问该函数，然后该函数根据事件打印出作用域，从而打印出与触发事件的元素关联的作用域。

@jm-的建议也工作，但我不认为它在jsFiddle工作。我得到这个错误在jsFiddle在Chrome:

> angular.element($0).scope()
ReferenceError: angular is not defined

只需将$scope赋值为全局变量。问题解决了。

app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    window.$scope = $scope;
}

实际上，我们在开发中比在生产中更需要$scope。

@JasonGoemaat已经提到了，但添加它作为这个问题的合适答案。

我通常使用jQuery data()函数:

$($0).data().$scope

$0是当前在chrome DOM检查器中选中的项目。 1美元，2美元…等等都是之前选定的项目。

这是一种在没有Batarang的情况下获得瞄准镜的方法，你可以:

var scope = angular.element('#selectorId').scope();

或者如果你想通过控制器名找到你的作用域，这样做:

var scope = angular.element('[ng-controller=myController]').scope();

在你对你的模型做了更改之后，你需要通过调用以下命令将更改应用到DOM:

scope.$apply();

我同意最好的是Batarang在选择对象后使用它的$scope(它与angular.element($0).scope()相同，甚至更短的jQuery: $($0).scope()(我的最爱))

同样，如果你像我一样在body元素上有主作用域，那么$('body').scope()就可以了。

推荐文章