小编典典

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

all

我想$scope在 Chrome 的 JavaScript 控制台中访问我的变量。我怎么做?

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


阅读 107

收藏
2022-02-25

共1个答案

小编典典

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

angular.element($0).scope()

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

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

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

插件/扩展

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

  • 巴达朗。这已经有一段时间了。

  • ng检查员。这是最新的,顾名思义,它允许您检查应用程序的范围。

玩 jsFiddle

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

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

jQuery 精简版

如果在 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/

2022-02-25