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

Question

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

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

Answer 1

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

angular.element($0).scope()

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

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

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

插件/扩展

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

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

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

和jsFiddle一起玩

使用jsfiddle时,您可以通过在URL的末尾添加来打开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/

Answer 2

改善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所提到的)是在"元素"选项卡中单击它,它会自动存储为$0.

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

Answer 3

如果你已经安装了Batarang

然后你可以写:

$scope

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

Answer 4

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

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

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

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

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

scope.$apply();

Answer 5

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

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

Answer 6

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

例如,如果您的控制器指令是这样创建的: <div ng-controller="FormController as frm"> 那么要访问startDate控制器的属性,您可以调用angular.element($0).scope().frm.startDate

Answer 7

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

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

Answer 8

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

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

我们实际上$scope在开发中需要比在生产中更频繁。

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

Answer 9

要添加和增强其他答案，请在控制台中输入$($0)以获取元素。如果是Angularjs应用程序，则默认情况下会加载jQuery lite版本。

如果您不使用jQuery，则可以使用angular.element（$ 0），如下所示：

angular.element($0).scope()

要检查您是否有jQuery及其版本，请在控制台中运行以下命令：

$.fn.jquery

如果已检查元素，则可通过命令行API参考$ 0获得当前选择的元素。Firebug和Chrome都有此参考。

但是，Chrome开发人员工具将使用这些引用提供通过属性$ 0，$ 1，$ 2，$ 3，$ 4选择的最后五个元素（或堆对象）。可以将最近选择的元素或对象引用为$ 0，第二个最近的元素或对象引用为$ 1，依此类推。

这是Firebug的命令行API参考，列出了它的参考。

$($0).scope()将返回与该元素关联的范围。您可以立即查看其属性。

您可以使用的其他一些东西是：

• 查看元素的父范围：

$($0).scope().$parent。

• 您也可以将其链接：

$($0).scope().$parent.$parent

• 您可以查看根范围：

$($0).scope().$root

• 如果突出显示了具有隔离范围的指令，则可以使用以下命令查看它：

$($0).isolateScope()

有关更多详细信息和示例，请参见调试陌生的Angularjs代码的技巧和窍门。

Answer 10

您可以首先从 DOM 中选择您想要检查的范围内的元素：

然后您可以通过在控制台中查询以下内容来查看范围对象：

angular.element($0).scope()

您可以查询范围内的任何属性，例如：

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

或者您可以检查附加到范围的控制器：

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

（另一个可行的选择是在代码中放置一个断点。如果当前位于当前的“普通旧 JavaScript”范围内，那么您可以在控制台中$scope检查 的值。）$scope

Answer 11

检查元素，然后在控制台中使用它

s = $($0).scope()
// `s` is the scope object if it exists