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

Posted 2021-04-14

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

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

答案

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

另一答案

只需将$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();

另一答案

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

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

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

另一答案

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

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

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

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

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

另一答案

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

另一答案

在angular中我们通过angular.element（）得到jquery元素....让c ...

angular.element().scope();

例：

<div id=""></div>

另一答案

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

另一答案

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

   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;
        }

另一答案

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

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

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

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

另一答案

改善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元素的另一种简单方法（如提到的那样）是在'elements'选项卡中单击它，它会自动存储为$0。

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

另一答案

如果你已经安装了Batarang

然后你可以写：

$scope

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

另一答案

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

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

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

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

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

scope.$apply();

另一答案

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

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

另一答案

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

例如，如果您的控制器指令是这样创建的：<div ng-controller="FormController as frm">然后访问控制器的startDate以上是关于如何使用AngularJS在浏览器控制台中访问$ scope变量？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Web 浏览器中隐藏 angularjs 之类的控制器的源代码？ [复制]

如何在 AngularJs 控制器或服务中访问 POJO 属性

Node.js + AngularJS + Socket.io：推送的数据在控制器中不可用

AngularJS - 如何从控制器中的ng-repeat访问下一个项目

如何防止Angularjs 1.x中的直接HTML访问？

AngularJS 从子控制器访问父范围