1. 首页
  2. 问题列表
  3. 如何使用AngularJS访问浏览器控制台中的$scope变量？
提问者：小点点

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


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

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


共3个答案

匿名用户

在开发人员工具的HTML面板中选择一个元素，并在控制台中键入以下内容:

angular.element($0).scope()

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

您还可以通过元素ID将作用域作为目标，如下所示:

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

增编/扩展

有一些非常有用的Chrome扩展，您可能想要查看一下:

>

  • Batarang。这已经有一段时间了。

    NG-督察。这是最新的一个，顾名思义，它允许您检查应用程序的作用域。

    玩jsFiddle

    使用jsfiddle时，可以在显示模式下通过在URL末尾添加/show打开fiddle。这样运行时，您可以访问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/

    • 匿名用户

    为了改进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提到的）是在'elements'选项卡中单击它，它会自动存储为$0。

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

    匿名用户

    如果您已经安装了Batarang

    然后你可以写:

    $scope

    当你在Chrome的elements视图中选择了元素时。Ref-https://github.com/angular/angularjs-batarang#控制台

    相关问题