提问



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


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

最佳参考


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


angular.element($0).scope()


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


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


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


扩展中心/扩展程序


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



  • Batarang。这已经存在了一段时间。[59]

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



使用jsFiddle


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


http://jsfiddle.net/jaimem/Yatbt/show[61]


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/[62]

其它参考1


改善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();

其它参考2


如果你安装了Batarang [63]


然后你可以写:


$scope


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

其它参考3


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


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


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


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


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


scope.$apply();

其它参考4


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


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




其它参考5


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


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

其它参考6


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


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

其它参考7


只需将$scope指定为全局变量即可。问题解决了。


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


实际上,我们需要$scope更多地在开发中而不是在生产中。


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

其它参考8


我通常使用jQuery data()函数:


$($0).data().$scope


$ DOM是chrome DOM检查器中当前选定的项目。
$ 1,$ 2 ..等等是以前选择的项目。

其它参考9


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


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

其它参考10


要添加和增强其他答案,请在控制台中输入$($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参考,列出了它的引用。[65]


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


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



  • 查看元素父作用域:



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



  • 你也可以链接这个:



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



  • 您可以查看根范围:



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



  • 如果您使用隔离范围突出显示指令,则可以使用以下命令查看:



$($0).isolateScope()


有关更多详细信息和示例,请参阅调试不熟悉的Angularjs代码的提示和技巧。[66]

其它参考11


我过去曾经angular.element($(".ng-scope")).scope();使用它并且效果很好。如果页面上只有一个应用范围,或者你可以做类似的事情,那就太好了:


angular.element($("div[ng-controller=controllerName]")).scope();angular.element(document.getElementsByClassName("ng-scope")).scope();

其它参考12


假设你想要访问元素的范围


<div ng-controller="hw"></div>


您可以在控制台中使用以下内容:


angular.element(document.querySelector('[ng-controller=hw]')).scope();


这将为您提供该元素的范围。

其它参考13


在代码中放置一个断点,该断点接近$ scope变量的引用(这样$ scope就在当前的普通旧JavaScript范围内)。然后你可以检查控制台中的$ scope值。

其它参考14


在angular中,我们通过angular.element()获取jquery元素....
让我...



  angular.element().scope();



例:


<div id=""></div>

其它参考15


在Chrome的控制台:


 1. Select the **Elements** tab
 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope


示例


angular.element($0).scope().a
angular.element($0).scope().b


Chrome控制台
[67]

其它参考16


只需在作用域外定义一个JavaScript变量,并将其分配给控制器中的作用域:


var myScope;
...
app.controller('myController', function ($scope,log) {
     myScope = $scope;
     ...


这就是它!它应该适用于所有浏览器(至少在Chrome和Mozilla中测试过)。


它正在工作,我正在使用这种方法。