如何从chrome控制台访问angular中的$scope变量

Question

如何从chrome的控制台访问范围变量小部件

function MyCntrl($scope) {
    $scope.widgets = [
        {text:'Widget #1', datarow:1, datacol:1, datasizex:3, datasizey:3},
        {text:'Widget #2', datarow:2, datacol:1, datasizex:3, datasizey:3},
        {text:'Widget #3', datarow:1, datacol:2, datasizex:3, datasizey:3},
        {text:'Widget #4', datarow:2, datacol:2, datasizex:3, datasizey:3}
    ];

像$scope.widgets这样的东西在控制台中根本不起作用！

Answer 1

您可以按照Will的asnwer或安装Angular Batarang Chrome extension。这不仅允许您从JavaScript控制台查看和操作“$scope”对象，而且是开发复杂AngularJS应用程序的基本工具。

Answer 2

范围绑定到DOM，因此您需要抓取一个元素并使用一些角度代码来获取范围。

最好的办法是获取控制器绑定的元素，并查看其作用域。

以下是答案如何使用AngularJS访问浏览器控制台中的$范围变量？

Answer 3

这是一种在没有巴塔朗的情况下进入范围的方法。假设页面上有对jquery和angular的引用，则可以执行以下操作：

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

或者，如果要按控制器名称查找范围，请执行以下操作：

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

对模型进行更改后，需要通过调用

scope.$apply();