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

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

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

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

angular.element($0).scope()

In WebKit http://en.wikipedia.org/wiki/WebKit和火狐浏览器，$0是对元素选项卡中所选 DOM 节点的引用，因此通过执行此操作，您可以在控制台中打印出所选 DOM 节点范围。

您还可以通过元素 ID 定位范围，如下所示：

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

插件/扩展

您可能想查看一些非常有用的 Chrome 扩展程序：

• Batarang https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk。这已经存在了一段时间了。

• ng-检查员 http://ng-inspector.org/。这是最新的，顾名思义，它允许您检查应用程序的范围。

玩jsFiddle

使用 jsfiddle 时，您可以在中打开小提琴show模式通过添加/show在 URL 的末尾。当像这样运行时，您可以访问angular全球的。你可以在这里尝试一下：

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

jQuery 精简版

如果你在 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/ http://jsfiddle.net/jaimem/DvRaR/1/show/