如何使用AngularJS在浏览器的控制台中访问$ scope变量? [英] How do I access the $scope variable in browser's console using AngularJS?
问题描述
我想在Chrome的JavaScript控制台中访问我的$scope变量.我该怎么办?
I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?
在控制台中，我既看不到$scope，也看不到模块myapp的名称.
I can neither see $scope nor the name of my module myapp in the console as variables.
推荐答案
在开发人员工具的HTML面板中选择一个元素，然后在控制台中输入以下内容:
Pick an element in the HTML panel of the developer tools and type this in the console:
angular.element($0).scope()
在 WebKit 和Firefox中，$0是对在元素标签，因此您可以在控制台中打印出选定的DOM节点范围.
In WebKit and Firefox, $0 is a reference to the selected DOM node in the elements tab, so by doing this you get the selected DOM node scope printed out in the console.
您还可以按元素ID定位作用域，如下所示:
You can also target the scope by element ID, like so:
angular.element(document.getElementById('yourElementId')).scope()
附加项/扩展名
您可能想检出一些非常有用的Chrome扩展程序:
There are some very useful Chrome extensions that you might want to check out:
-
Batarang .这已经有一段时间了.
Batarang. This has been around for a while.
ng-inspector .这是最新的，顾名思义，它使您可以检查应用程序的范围.
ng-inspector. This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.
玩jsFiddle
使用jsfiddle时，您可以通过在URL末尾添加/show以 show 模式打开小提琴.像这样运行时，您可以访问angular全局变量.您可以在这里尝试:
When working with jsfiddle you can open the fiddle in show mode by adding /show at the end of the URL. When running like this you have access to the angular global. You can try it here:
http://jsfiddle.net/jaimem/Yatbt/show
jQuery Lite
如果在AngularJS之前加载jQuery，则可以将angular.element传递给jQuery选择器.因此，您可以使用
If you load jQuery before AngularJS, angular.element can be passed a jQuery selector. So you could inspect the scope of a controller with
angular.element('[ng-controller=ctrl]').scope()
一个按钮
angular.element('button:eq(1)').scope()
...等等.
您实际上可能想使用全局函数使其变得更容易:
You might actually want to use a global function to make it easier:
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/
这篇关于如何使用AngularJS在浏览器的控制台中访问$ scope变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
