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

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

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

答案

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

angular.element($0).scope()

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

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

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

插件 / 扩展

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

巴塔朗这已经有一段时间了。
ng-inspector 。这是最新的，顾名思义，它允许您检查应用程序的范围。

和 jsFiddle 一起玩

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

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

jQuery Lite

如果在 AngularJS 之前加载 jQuery， angular.element可以将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/

改善 jm 的答案......

// Access whole scope
angular.element(myDomElement).scope();

// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();

或者，如果你使用的是 jQuery，这也会做同样的事情......

$('#elementId').scope();
$('#elementId').scope().$apply();

另一种从控制台访问 DOM 元素的简单方法（如 jm 所述）是在 “elements” 选项卡中单击它，它会自动存储为$0 。

angular.element($0).scope();

如果你已经安装了Batarang

然后你可以写：

$scope

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