如何从 chrome 控制台以角度访问 $scope 变量

Posted 2023-03-07

【中文标题】如何从 chrome 控制台以角度访问 $scope 变量

【英文标题】：How to access $scope variable in angular from chrome console

【发布时间】：2013-03-17 19:16:49

【问题描述】：

如何从 chrome 的控制台访问范围变量小部件

function MyCntrl($scope) 
    $scope.widgets = [
        text:'Widget #1', datarow:1, datacol:1, datasizex:3, datasizey:3,
        text:'Widget #2', datarow:2, datacol:1, datasizex:3, datasizey:3,
        text:'Widget #3', datarow:1, datacol:2, datasizex:3, datasizey:3,
        text:'Widget #4', datarow:2, datacol:2, datasizex:3, datasizey:3
    ];

$scope.widgets 之类的东西在控制台中根本不起作用！

【问题讨论】：

how to access the angular $scope variable in browsers console 的可能重复项

【参考方案1】：

您可以首先从 DOM 中选择一个位于您要检查的 scope 中的元素：

然后就可以通过在控制台中查询如下来查看作用域对象：

angular.element($0).scope()

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

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

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

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

【参考方案2】：

这是一个示例：我的 Angular 单页应用程序上有以下 DOM：

<div ng-controller="usersAppController as uac" class="ng-scope">
    <div class="tab ng-scope is-normal is-active" id="rolesTab" ref="tabs" mode="normal" target-ref="rolesContent" xng-locals="xng.userApp.roles">Roles
    </div>
</div>

并且这个 div 存在于控制器名称 usersAppController 作为 uac 上面这里我有控制器作为语法

还要记下我在我的应用程序中使用 jQuery：

$($0).controller() 方法可以让我直接访问 $scope 对象上的 uac 对象。

$($0).scope() 将为我提供所选元素的原型链，如果我遵循该链，我将在该元素上找到我的范围对象。

【参考方案3】：

这是一种无需batarang即可进入范围的方法。假设您在页面上有对 jquery 和 angular 的引用，您可以这样做：

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

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

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

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

scope.$apply();

【讨论】：

如果您使用神奇的内置元素选择器，这将变得更加强大。选择 dom 树中的元素，然后在控制台中计算 angular.element($0).scope()

【参考方案4】：

您可以按照 Will 的说法或安装 Angular Batarang Chrome 扩展程序。这不仅允许您从 javascript 控制台查看和操作“$scope”对象，而且它还是开发复杂 AngularJS 应用程序时的基本工具。

【参考方案5】：

范围绑定到 DOM，因此您需要抓取一个元素并使用一些角度代码来获取范围。

最好的办法是获取控制器绑定的元素并查看其范围。

这就是答案 How do I access the $scope variable in browser's console using AngularJS?

【讨论】：

感谢 angular.element('[ng-controller=MyCntrl]').scope() 成功了

如果您以这种方式修改控制台中的任何范围变量，请确保调用angular.element('[ng-controller=MyCntrl]').scope().$apply();。否则您将看不到更改。