如何访问使用AngularJS在浏览器的控制台中的$范围的变量？ [英] How to access the $scope variable in browser's console using AngularJS?

问题描述

我想访问我的 $范围变量在Chrome的JavaScript控制台。我该怎么做呢？

I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?

我既看不到 $范围，也没有我的控制台作为变量模块的myapp <​​/ code>的名称。

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的， $ 1,0 是所选择的一个参考在元素标签DOM节点，所以做这个你在控制台打印出所选择的DOM节点范围。

In WebKit, $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:

• <一个href=\"https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk\">Batarang.这已经有一段时间了。

• Batarang. This has been around for a while.

NG-督察。这是最新的一个，顾名思义，它可以让你检查你的应用程序的范围。

ng-inspector. This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.

用的jsfiddle播放

在使用的jsfiddle您可以通过添加 /节目在网址的结尾中的显示的模式打开小提琴工作。当这样运行，您有机会获得角全球。你可以在这里尝试一下：

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的精简版

如果您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();
};

现在，你可以做到这一点。

Now you could do this

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

查看此处： http://jsfiddle.net/jaimem/DvRaR/1/show/

这篇关于如何访问使用AngularJS在浏览器的控制台中的$范围的变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！