我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?
我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。
我想访问我的$范围变量在Chrome的JavaScript控制台。我怎么做呢?
我既不能看到$scope也不能看到我的模块myapp的名称在控制台中作为变量。
当前回答
在开发人员工具的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/
其他回答
要添加和增强其他答案,在控制台中输入$($0)以获取元素。如果它是一个Angularjs应用程序,则默认加载jQuery精简版。
如果你不使用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()。美元的父母。
你也可以链接这个:
(0)美元.scope()。父母。父母美元
你可以看看根作用域:
(0)美元.scope根。美元()
如果你用隔离作用域高亮显示了一个指令,你可以用:
(0)美元.isolateScope ()
更多细节和示例请参见调试不熟悉的Angularjs代码的提示和技巧。
假设您想访问元素的作用域
<div ng-controller="hw"></div>
你可以在控制台中使用以下命令:
angular.element(document.querySelector('[ng-controller=hw]')).scope();
这将为您提供该元素的范围。
对于这些答案有一个警告:如果你对控制器进行了别名,那么你的作用域对象将位于scope()返回的对象中的一个对象中。
例如,如果你的控制器指令是这样创建的: <div ng-controller="FormController as frm"> 然后访问控制器的startDate属性,调用angular.element($0).scope().frm.startDate
在控制器的某个地方(通常最后一行是一个好地方),放置
console.log($scope);
如果你想查看内部/隐式作用域,比如ng-repeat的内部,类似这样的方法可以工作。
<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工作。我得到这个错误在jsFiddle在Chrome:
> angular.element($0).scope()
ReferenceError: angular is not defined
只需在作用域外定义一个JavaScript变量,并将其分配到控制器中的作用域:
var myScope;
...
app.controller('myController', function ($scope,log) {
myScope = $scope;
...
就是这样!它应该可以在所有浏览器中工作(至少在Chrome和Mozilla中测试)。
它正在工作,我正在用这个方法。