How do I access the $scope variable in browser's console using AngularJS?
我想在chrome的javascript控制台中访问我的
我在控制台中既看不到
在开发人员工具的HTML面板中选择一个元素，然后在控制台中键入：
1 | angular.element($0).scope() |
在webkit和firefox中，
您还可以按元素ID确定作用域的目标，例如：
1 | angular.element(document.getElementById('yourElementId')).scope() |
附加组件/扩展
有一些非常有用的chrome扩展，您可能需要查看：
巴塔让。这已经存在一段时间了。
检查员。这是最新的一个，顾名思义，它允许您检查应用程序的作用域。
玩J小提琴
使用jsFiddle时，您可以通过在URL末尾添加
http://jsfiddle.net/jaimem/yatbt/show
jQuery简化
如果在angularJS之前加载jquery，则可以向
1 | angular.element('[ng-controller=ctrl]').scope() |
一个按钮
1 | angular.element('button:eq(1)').scope() |
…等等。
实际上，您可能希望使用全局函数使其更简单：
1 2 3 | window.SC = function(selector){ return angular.element(selector).scope(); }; |
现在你可以这么做了
1 2 | SC('button:eq(10)') SC('button:eq(10)').row // -> value of scope.row |
请访问：http://jsfiddle.net/jaimem/dvra/1/show/
为了改进JM的答案…
1 2 3 4 5 6 7 8 9 | // 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，这会做同样的事情…
1 2 | $('#elementId').scope(); $('#elementId').scope().$apply(); |
从控制台访问DOM元素的另一个简单方法(如jm所提到的)是在"元素"选项卡中单击它，它将自动存储为
1 | angular.element($0).scope(); |
如果你已经安装了巴塔朗
然后你就可以写：
1 | $scope |
当您在Chrome的元素视图中选择元素时。参考-https://github.com/angularjs-batarang console
这是一种不使用巴塔朗的方法，你可以这样做：
1 | var scope = angular.element('#selectorId').scope(); |
或者，如果要按控制器名称查找作用域，请执行以下操作：
1 | var scope = angular.element('[ng-controller=myController]').scope(); |
对模型进行更改后，需要通过调用以下命令将更改应用于DOM：
1 | scope.$apply(); |
在控制器的某个地方(通常最后一行是个好地方)，放
1 | console.log($scope); |
如果您希望看到一个内部/隐式范围，比如说在一个NG重复中，这样的事情会起作用。
1 2 3 4 5 | <li ng-repeat="item in items"> ... show scope </li> |
然后在你的控制器里
1 2 3 4 5 6 | function MyCtrl($scope) { ... $scope.showScope = function(e) { console.log(angular.element(e.srcElement).scope()); } } |
注意上面我们在父作用域中定义了showscope()函数，但是这没关系…子/内部/隐式作用域可以访问该函数，然后根据事件打印出作用域，从而打印出与触发事件的元素关联的作用域。
@JM-的建议也有效，但我认为它在JSfiddle中不起作用。我在Chrome内部的jsFiddle上得到这个错误：
1 2 | > angular.element($0).scope() ReferenceError: angular is not defined |
对于这些答案中的许多，有一个警告：如果您将控制器别名，那么作用域对象将位于从
例如，如果您的控制器指令是这样创建的：
我同意在选择一个对象(与
另外，如果像我一样，您在
我以前用过
只需将
1 2 3 | app.controller('myCtrl', ['$scope', '$http', function($scope, $http) { window.$scope = $scope; } |
实际上，我们在开发中比在生产中更需要
已经被@jasongoemat提到了，但是添加它作为这个问题的合适答案。
要添加和增强其他答案，请在控制台中输入
如果不使用jquery，可以使用angular.element($0)，如下所示：
1 | angular.element($0).scope() |
要检查是否有jquery和版本，请在控制台中运行此命令：
1 | $.fn.jquery |
如果您检查了一个元素，那么当前选择的元素可以通过命令行api引用$0获得。Firebug和Chrome都有这个参考。
但是，chrome开发人员工具将使用这些引用使通过名为$0、$1、$2、$3、$4的属性选择的最后五个元素(或堆对象)可用。最近选择的元素或对象可以引用为$0，第二个最新的元素或对象可以引用为$1，依此类推。
下面是firebug的命令行API引用，列出了它的引用。
您还可以使用其他一些功能：
- 查看元素父范围：
- 你也可以链接这个：
- 您可以查看根作用域：
- 如果用isolate scope突出显示了一个指令，则可以使用以下命令查看它：
有关更多详细信息和示例，请参阅调试不熟悉的AngularJS代码的提示和技巧。
检查元件，然后在控制台中使用。
1 2 | s = $($0).scope() // `s` is the scope object if it exists |
我通常使用jquery data()函数：
1 | $($0).data().$scope |
$0当前是chrome dom inspector中的选定项。1美元，2美元…等等是以前选择的项目。
假设您想访问元素的作用域，比如
1 |
您可以在控制台中使用以下内容：
1 | angular.element(document.querySelector('[ng-controller=hw]')).scope(); |
这将为您提供该元素的作用域。
为了调试的目的，我把这个放到控制器的开头。
1 2 3 | window.scope = $scope; $scope.today = new Date(); |
我就是这样使用它的。
然后在调试完成后删除它。
在代码中靠近$scope变量引用的某个地方放置一个断点(这样$scope就在当前的'plain old javascript'范围内)。然后您可以在控制台中检查$scope值。
在angular中，我们通过angular.element()得到jquery元素…让C…
angular.element().scope();
例子：
在Chrome的控制台上：
1 2 3 | 1. Select the **Elements** tab 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or , or etc. 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope |
例子
1 2 | angular.element($0).scope().a angular.element($0).scope().b |
铬合金控制台
只需在作用域之外定义一个javascript变量并将其分配给控制器中的作用域：
1 2 3 4 5 | var myScope; ... app.controller('myController', function ($scope,log) { myScope = $scope; ... |
就是这样！它应该可以在所有浏览器中工作(至少在Chrome和Mozilla中测试过)。
它正在工作，我正在使用这个方法。