我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?
我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。
我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?
我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。
当前回答
为了改进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();
其他回答
同样,我们可以像这样通过HTML元素的名称来访问作用域: angular.element (document.getElementsByName (onboardingForm) [0]) .scope ()
出于调试的目的,我把它放在控制器的开头。
window.scope = $scope;
$scope.today = new Date();
我是这样使用它的。
然后删除它,当我完成调试。
检查元素,然后在控制台中使用它
s = $($0).scope()
// `s` is the scope object if it exists
在Chrome的控制台:
1. Select the **Elements** tab
2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
3. Type the command **angular.element($0).scope()** with following variable in the angular's scope
例子
angular.element($0).scope().a
angular.element($0).scope().b
Chrome的控制台
在开发人员工具的HTML面板中选择一个元素,并在控制台中键入:
angular.element($0).scope()
在WebKit和Firefox中,$0是对元素选项卡中所选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。元素可以传递一个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/