Question

如何从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这样的东西在控制台中根本不起作用！

Answer 1

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

您最好的办法是获取Controller所绑定的元素，并查看其范围。

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

Answer 2

这是一种在没有batarang的情况下进入范围的方法。假设您在页面上引用了jquery和angular，您可以这样做：

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

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

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

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

将更改应用于DOM

scope.$apply();

Answer 3

您可以按照Will的asnwer或安装Angular Batarang Chrome扩展程序。这不仅可以让您查看和操作'$ scope'对象，比如说您的JavaScript控制台，而且它也是开发复杂AngularJS应用程序时的基本工具。

Answer 4

以下是一个示例：我的角度单页应用程序中有以下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（）将为我选择的元素提供原型链，如果我遵循该链，我将在该元素上找到我的范围对象。

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

4 个答案: