如何使用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来打开小提琴。 像这样运行时，您可以访问angular全局。 你可以在这里尝试：
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/
为了改善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中提到的），在'元素'标签中点击它，它会自动存储为$0 。
angular.element($0).scope();
如果你已经安装了Batarang
那么你可以写：
$scope
当你在chrome中的元素视图中选择元素。 参考 – https://github.com/angular/angularjs-batarang#console
放在你的控制器的某个地方（通常最后一行是个好地方）
console.log($scope);
如果你想看到一个内部/隐式的范围，说在一个ng重复，这样的事情会起作用。
<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里面工作。 我在Chrome中的jsFiddle上得到这个错误：
> angular.element($0).scope() ReferenceError: angular is not defined
这是在没有Batarang的情况下获得范围的一种方法，您可以这样做：
var scope = angular.element('#selectorId').scope();
或者，如果您想通过控制器名称查找范围，请执行以下操作：
var scope = angular.element('[ng-controller=myController]').scope();
在对模型进行更改之后，您需要通过调用以下方法将更改应用于DOM：
scope.$apply();
一个告诫，许多这些答案：如果你别名你的控制器你的范围对象将在scope()返回的对象中的对象。
例如，如果您的控制器指令是这样创建的： <div ng-controller="FormController as frm">然后访问控制器的startDate属性，您可以调用angular.element($0).scope().frm.startDate
我同意最好的选择一个对象（它是相同的angular.element($0).scope()或更短的jQuery： $($0).scope() （我的最爱）是它的$scope $($0).scope() ）
另外，如果像我一样，你有主体作用于body元素， $('body').scope()可以正常工作。
只要把$scope作为一个全局变量。 问题解决了。
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) { window.$scope = $scope; }
我们在开发中实际上比生产中更需要$scope 。
@JasonGoemaat已经提到了这个问题，但是把它作为这个问题的一个合适的答案。
我通常使用jQuery data（）函数：
$($0).data().$scope
$ 0是当前在Chrome DOM检查器中选定的项目。 $ 1，$ 2 ..等都是之前选定的项目。
检查元素，然后在控制台中使用它
s = $($0).scope() // `s` is the scope object if it exists
要添加和增强其他答案，请在控制台中输入$($0)以获取元素。 如果是Angularjs应用程序，则默认加载jQuery lite版本。
如果你不使用jQuery，你可以使用angular.element（$ 0）
angular.element($0).scope()
要检查您是否有jQuery和版本，请在控制台中运行此命令：
$.fn.jquery
如果您已经检查了某个元素，则当前选定的元素可以通过命令行API参考$ 0获得。 Firebug和Chrome都有这个参考。
不过，Chrome开发人员工具将使用这些引用通过名为$ 0，$ 1，$ 2，$ 3，$ 4的属性提供最后五个元素（或堆对象）。 最近选择的元素或对象可以被引用为$ 0，第二个最近的为$ 1等等。
这是Firebug的命令行API参考 ，列出了它的参考。
$($0).scope()将返回与该元素关联的范围。 你可以马上看到它的属性。
其他一些你可以使用的东西是：
- 查看元素父范围：
$($0).scope().$parent 。
- 你也可以链接：
$($0).scope().$parent.$parent
- 你可以看看根范围：
$($0).scope().$root
- 如果您突出显示隔离范围的指令，则可以使用以下方法查看：
$($0).isolateScope()
有关更多详细信息和示例，请参阅调试不熟悉的Angularjs代码的提示和技巧 。
我已经使用angular.element($(".ng-scope")).scope(); 在过去，它的工作很好。 只有在页面上只有一个应用程序范围时才有用，或者您可以执行如下操作：
angular.element($("div[ng-controller=controllerName]")).scope(); 或者angular.element(document.getElementsByClassName("ng-scope")).scope();
假设你想访问元素的范围
<div ng-controller="hw"></div>
您可以在控制台中使用以下内容：
angular.element(document.querySelector('[ng-controller=hw]')).scope();
这会给你在这个元素的范围。
将代码中的断点放在接近对$ scope变量的引用的位置（这样$ scope就在当前的“普通旧JavaScript”范围内）。 然后你可以检查控制台中的$ scope值。
只需在范围外定义一个JavaScript变量，并将其分配给控制器中的范围：
var myScope; ... app.controller('myController', function ($scope,log) { myScope = $scope; ...
而已！ 它应该在所有的浏览器中工作（至少在Chrome和Mozilla中测试过）。
它正在工作，我正在使用这种方法。
