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

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

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

650846 次浏览
小开
最佳答案

在开发人员工具的超文本标记语言面板中选择一个元素并在控制台中键入：

angular.element($0).scope()

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

您还可以通过元素ID定位范围，如下所示：

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

插件/扩展

有一些非常有用的Chrome扩展，你可能想看看：

  • Batarang

  • 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/

小开

在控制器的某个地方（通常最后一行是个好地方），放

console.log($scope);

如果你想看到一个内部/隐式作用域，比如在ng-重复中，这样的东西就可以了。

<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中有效。我在jsFiddleChrome中得到这个错误：

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

小开

为了改进jm的回答…

// Access whole scopeangular.element(myDomElement).scope();
// Access and change variable in scopeangular.element(myDomElement).scope().myVar = 5;angular.element(myDomElement).scope().myArray.push(newItem);
// Update page to reflect changed variablesangular.element(myDomElement).scope().$apply();

或者如果你使用jQuery，这会做同样的事情…

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

从控制台访问DOM元素的另一种简单方法（如jm提到的）是在“元素”选项卡中单击它，它会自动存储为$0。

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

如果您安装了Batarang

你可以只写：

$scope

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

小开

我同意最好的是Batarang，在选择对象后它是$scope（它与angular.element($0).scope()相同，甚至更短的jQuery：$($0).scope()（我最喜欢的））

此外，如果像我一样，你在body元素上有你的主作用域，那么$('body').scope()可以正常工作。

小开

这是一种在没有Batarang的情况下获得范围的方法，您可以这样做：

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

或者，如果您想按控制器名称查找范围，请执行以下操作：

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

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

scope.$apply();
小开

假设您想访问元素的范围，例如

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

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

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

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

小开

对许多这些答案的一个警告：如果您为控制器别名，您的范围对象将位于scope()返回对象中的一个对象中。

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

小开

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

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

就是这样！它应该适用于所有浏览器（至少在Chrome和Mozilla中测试过）。

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

小开

我通常使用jQuery data（）函数：

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

0美元当前在chrome DOM检查器中被选中。1美元，2美元…等等是以前选择的项目。

小开

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

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

要添加和增强其他答案，请在控制台中输入$($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美元的属性选择的最后五个元素（或堆对象）。

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

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

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

  • 查看元素父作用域：

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

  • 您也可以链接：

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

  • 您可以查看根范围：

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

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

$($0).isolateScope()

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

小开

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

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

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

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

小开

我过去使用过angular.element($(".ng-scope")).scope();，效果很好。只有当您在页面上只有一个应用程序范围时才有效，或者您可以执行以下操作：

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

小开

在角度中，我们通过angular.element（）获得jQuery元素。让c…

angular.element().scope();

例子：

<div id=""></div>

小开

在Chrome控制台：

 1. Select the **Elements** tab2. 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().aangular.element($0).scope().b

Chrome控制台输入图片描述

小开

仅出于调试目的，我将其放在控制器的开头。

   window.scope = $scope;
$scope.today = new Date();

这就是我如何使用它。

在此处输入图片描述

然后在我完成调试后删除它。

小开

这也需要安装jQuery，但非常适合开发环境。它查看每个元素以获取范围的实例，然后返回标有控制器名称的它们。它还删除了任何以$开头的属性，这是angularjs通常用于其配置的。

let controllers = (extensive = false) => {let result = {};$('*').each((i, e) => {let scope = angular.element(e).scope();if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {let slimScope = {};for(let key in scope) {if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {slimScope[key] = scope[key];}}result[$(e).attr('ng-controller')] = slimScope;}});
return result;}
小开

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

在此处输入图片描述

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

angular.element($0).scope()

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

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

或者您可以检查附加到作用域的控制器：

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

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

小开

此外，我们可以通过超文本标记语言元素的名称访问范围，如下所示：angular.element（document.getElementsByName（'onboardingForm'）[0]）


提交答案