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

Question

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

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

score 1827 · Accepted Answer

在开发人员工具的 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/

score 189 · Accepted Answer

为了改进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();

score 72 · Accepted Answer

如果你已经安装了Batarang

然后你可以写：

$scope

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

score 38 · Accepted Answer

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

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

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

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

对模型进行更改后，您需要通过调用将更改应用到 DOM：

scope.$apply();

score 31 · Accepted Answer

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

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~~

score 10 · Accepted Answer

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

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

score 9 · Accepted Answer

要添加和增强其他答案，请在控制台中输入$($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 代码的提示和技巧。

score 8 · Accepted Answer

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

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

score 7 · Accepted Answer

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

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

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

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

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

我通常为此使用 jQuery data() 函数：

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

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

score 3 · Accepted Answer

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

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

angular.element($0).scope()

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

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

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

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

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

score 2 · Accepted Answer

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

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

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

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

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

score 1 · Accepted Answer

这也需要安装 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;
        }

score 1 · Accepted Answer

在 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 的控制台

score 0 · Accepted Answer

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

   window.scope = $scope;

  $scope.today = new Date();

这就是我使用它的方式。

然后在我完成调试时将其删除。

score 0 · Accepted Answer

在 Angular 中，我们通过 angular.element().... 获得 jquery 元素。

angular.element().scope();

例子：

<div id=""></div>

score -7 · Accepted Answer

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

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

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

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

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

19 回答 19

Related

Reference