如何使用AngularJS在浏览器的控制台中访问$ scope变量？

Question

我想$scope在Chrome的JavaScript控制台中访问我的变量。我怎么做？

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

Answer 1

在开发人员工具的HTML面板中选择一个元素，然后在控制台中输入以下元素：

angular.element($0).scope()

在WebKit和Firefox中，$0是对elements选项卡中所选DOM节点的引用，因此通过执行此操作，可以在控制台中打印出所选DOM节点范围。

您还可以按元素ID定位作用域，如下所示：

angular.element(document.getElementById('yourElementId')).scope()

插件/扩展

您可能需要检查一些非常有用的Chrome扩展程序：

• Batarang。这已经有一段时间了。

• ng-inspector。这是最新的，顾名思义，它使您可以检查应用程序的范围。

玩jsFiddle

使用jsfiddle时，您可以通过在URL的末尾添加以 显示
模式打开小提琴/show。这样运行时，您可以访问angular全局变量。您可以在这里尝试：

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

如果您在AngularJS之前加载jQuery，angular.element则可以传递jQuery选择器。因此，您可以使用以下命令检查控制器的范围

angular.element('[ng-controller=ctrl]').scope()

一个按钮

 angular.element('button:eq(1)').scope()

… 等等。

您实际上可能想使用全局函数来简化它：

window.SC = function(selector){
    return angular.element(selector).scope();
};

现在您可以执行此操作

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

在这里检查：http :
//jsfiddle.net/jaimem/DvRaR/1/show/