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


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

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


1126
2017-12-06 11:52


起源


为了调试我经常设置 window.MY_SCOPE = $scope; 我控制器功能的第一件事。 - Jason Goemaat
如果您正在考虑在Firefox中进行开发/测试,您也可以使用 AngScope,一个显示的小扩展 $scope 选定DOM元素的对象到Firebug的DOM Inspector中。 - Kos Prov
@JasonGoemaat为什么不使用window。$ scope = $ scope;所以你可以简单地使用$ scope而不是MY_SCOPE - 我没有注意到任何问题,但也许我错过了一个安全问题或者什么。 - James Gentes
为了清楚起见,有角色的人可能会感到困惑,并认为如果只是看到它以这种方式使用,那么$ scope在控制台中是神奇可用的。此外,如果您在代码中错误地使用了范围声明和范围中的范围,那么您将在窗口对象上使用它而不是出错。 - Jason Goemaat


答案:


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

angular.element($0).scope()

WebKit的 和Firefox, $0 是元素选项卡中所选DOM节点的引用,因此,通过执行此操作,您将获得在控制台中打印出的选定DOM节点范围。

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

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

插件/扩展

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

  • Batarang。这已经有一段时间了。

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

和jsFiddle一起玩

使用jsfiddle时,您可以打开小提琴 显示 模式加入 /show 在URL的末尾。这样运行时你可以访问 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/


1618
2017-12-06 12:56



谢谢。当我尝试安装Batarang时,它告诉我你的计算机不受支持,我有ubuntu,有什么想法吗? - murtaza52
@ jm-截至 angular.element($0).scope(),它会一直有效,直到你尝试调用某些方法。我试过,由于某种原因,在这个设置中没有HTTP请求? - krtek
使用jsfiddle中的chrome,您可以通过窗口底部的下拉菜单进入show frame。通常它说 <top frame> 而你想选择 result( fiddle.jsshell.net/ ) 在运行框架的上下文中使用控制台。 - Jason Goemaat
请注意,如果您正在禁用调试信息,则始终会使用此方法进行未定义。这是预期的,可以通过.. .well来防止,而不是禁用$ compileProvider上的调试信息 - Robba
angular.element($ 0)替代.scope():你也可以做$($ 0).scope() - user2954463


改善jm的答案......

// Access whole scope
angular.element(myDomElement).scope();

// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();

或者如果你使用的是jQuery,这也会做同样的事情......

$('#elementId').scope();
$('#elementId').scope().$apply();

从控制台访问DOM元素的另一种简单方法(如jm所述)是在'elements'选项卡中单击它,它会自动存储为 $0

angular.element($0).scope();

173
2018-04-02 04:49



angular包含jquery的一个子集,所以你总是可以使用后面的语法(如果它是正确的),我不确定它是 - Pizzaiola Gorgonzola
我结束了 angular.element(document.body).scope(), 谢谢! - Alex Sorokoletov


如果你已安装 Batarang

然后你可以写:

$scope

在chrome中的元素视图中选择元素时。 参考 - https://github.com/angular/angularjs-batarang#console


70
2017-09-06 16:36





这是一种在没有Batarang的情况下进入范围的方法,您可以这样做:

var scope = angular.element('#selectorId').scope();

或者,如果要按控制器名称查找范围,请执行以下操作:

var scope = angular.element('[ng-controller=myController]').scope();

在对模型进行更改后,您需要通过调用以下方法将更改应用于DOM:

scope.$apply();

32
2018-06-04 17:02



这个答案有多少赞成?你不需要jQuery! angular.element 已经是一种元素选择方法。别说你需要jQuery来处理简单的任务 通过id选择元素! - Tyrsius
我没说你需要它。我所说的是,如果你已经拥有它,你就可以像这样使用它。 - BraveNewMath
angular.element  已经做了你正在使用jQuery的东西。 实际上,如果jQuery可用 angular.element 是一个 jQuery的别名。 您不必要地使代码复杂化。 angular.element('#selectorId') 和 angular.element('[ng-controller=myController]')做同样的事情,只用更少的代码。你不妨打个电话 angular.element('#selectorId'.toString()) - Tyrsius
@Tyrsius,也许你的反馈可能不那么具有指责性和愤怒,而且更专业一些? - Tass
@Tass你是对的,我是不必要的粗鲁。我道歉。足以说同样的事情正在进行两次。 - Tyrsius


在控制器的某个地方(通常最后一行是一个好地方),放

console.log($scope);

如果你想看到内部/隐式范围,比如说在ng-repeat中,这样的东西就可以了。

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

然后在你的控制器中

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

注意上面我们在父作用域中定义了showScope()函数,但是没关系......子/内部/隐式作用域可以访问该函数,然后根据事件打印出作用域,从而与触发事件的元素。

@ jm-的建议也有效, 但我认为它不适用于jsFiddle。我在Chrome中的jsFiddle上收到此错误:

> angular.element($0).scope()
ReferenceError: angular is not defined


28
2017-12-06 21:16





对这些答案中的许多答案有一点警告:如果您对控制器进行别名,则您的范围对象将位于返回对象中的对象中 scope()

例如,如果您的控制器指令是这样创建的: <div ng-controller="FormController as frm"> 然后访问一个 startDate 控制器的属性,你会打电话 angular.element($0).scope().frm.startDate


9
2018-02-24 04:00



调节器 是 可以查看(因此到控制台)作为属性 $scope,命名 $ctrl 默认情况下,与您是否使用重命名无关 controllerAs 或不。我不明白你在哪里看到了 “警告” 在现有答案中。请注意,这里的大多数答案都是在以后提供的 controllerAs 不是一种常见的做法。 - Andrei Gheorghiu
对。当给出答案时, controllerAs 这不是常见的做法,所以对于那些可能一直在追随“烹饪书”的新手而言,这让他们感到困惑,因为他们告诉他们别名控制器,但是没有使用别名就看不到这些属性。两年前事情进展缓慢。 - Michael Blackburn


我同意最好的是Batarang $scope 选择一个对象后(它与...相同) angular.element($0).scope() 甚至更短的jQuery: $($0).scope() (我的最爱))

另外,如果像我一样,你有主要的范围 body 元素,a $('body').scope() 工作正常。


8
2018-01-23 23:54





只需分配 $scope 作为一个全局变量。问题解决了。

app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    window.$scope = $scope;
}

我们确实需要 $scope 更多的是在开发中而不是在生产中。

已经由@JasonGoemaat提到过,但将其作为这个问题的合适答案添加。


4
2017-11-01 16:26