问题

我想在Chrome的JavaScript控制台中访问我的 $ scope 变量.我该怎么办?

我不能在控制台中看到 $ scope 或我模块的名称 myapp 作为变量.



解决方法

在开发人员工具的HTML面板中选择一个元素,并在控制台中输入:

angular.element($0).scope()

WebKit 中, $ 0 是对所选DOM的引用节点,因此通过这样做,您可以在控制台中打印出所选的DOM节点范围.

您也可以按元素ID定位范围,例如:

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

附加/扩展

您可能想查看一些非常实用的Chrome扩充功能:

  • Batarang. This has been around for a while.

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

使用jsFiddle播放

使用jsfiddle时,您可以通过在网址末尾添加 / show show 模式下打开小提琴.当这样运行时,您可以访问 angular 全局.您可以在这里尝试:

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/




相关问题推荐