如何使用AngularJS访问浏览器控制台中的$ scope变量?

前端之家收集整理的这篇文章主要介绍了如何使用AngularJS访问浏览器控制台中的$ scope变量?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在Chrome的JavaScript控制台中访问我的$ scope变量。我怎么做?

我不能看到$ scope也没有我的模块myapp的名称在控制台作为变量。

在开发者工具的HTML面板中选择一个元素,并在控制台中输入:
angular.element($0).scope()

WebKit中,$ 0是对元素选项卡中所选DOM节点的引用,因此通过这样做,您可以在控制台中打印出所选的DOM节点作用域。

您还可以通过元素ID定位范围,如下所示:

angular.element(document.getElementById('yourElementId')).scope()

附加/扩展

您可能想查看一些非常有用的Chrome扩展程序:

> Batarang.这已经有一段时间了。
> ng-inspector.这是最新的一个,顾名思义,它允许您检查应用程序的范围。

使用jsFiddle

当使用jsfiddle时,您可以在显示模式下通过在URL末尾添加/显示来打开小提琴。当运行这样你可以访问角度全局。你可以在这里试试:

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

如果在AngularJS之前加载jQuery,angular.element可以传递一个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/

猜你在找的Angularjs相关文章