如何在浏览器中调试 angularjs 的 $rootScope 对象

当 angularjs 应用程序在浏览器中加载时，是否有一种方法来调试它？

我希望得到我当前应用程序的 $rootScope。我该怎么做？

39954 次浏览

小开

Batarang ——一个用于 AngularJS 的 Google Chrome 插件

在您安装了这个之后，您就可以

Log ($rootScope) ;

并检查您的铬控制台的范围对象。

顺便说一下，如果你想得到 $rootScope，你需要注入到你的控制器

喜欢

app.controller('MainCtrl', function($scope, $rootScope) {


}

小开

最佳答案

巴塔朗 + 1

另外，通过在控制台中执行以下操作，您可以从 DOM 中的任何元素获得范围

angular.element(DOMNODE).scope()

其中 DOMNODE 当然是对 DOM 节点的引用。

例如，在 Chrome 中的元素选项卡中，您可以选择 ng-app指令所在的节点，然后使用

angular.element($0).scope()

小开

在开发人员控制台中尝试这样做

$rootScope = angular.element(document).scope()

小开

只是想补充一下，有一个免费的 Chrome 扩展名为“角度范围检查器”(当前存储网址) ，它会自动检查开发工具元素选项卡中选定元素的范围

我今天才发现的，非常有用

小开

您可以在您的源代码中看到 $rootScope 开发工具-> 源代码

$rootScope

小开

在开发者控制台类型 angular.element('body').scope();的情况下，您的应用程序是 <body data-ng-app="SomeApp">

小开

对于那些使用 $compileProvider.debugInfoEnabled(false);和 ng-strict-di的用户，只需将其粘贴到控制台，$rootScope将被记录并添加到 window:

function getRootScope($rootScope){ console.log(window.$rootScope = $rootScope); }
getRootScope.$inject = ["$rootScope"];
angular.element(document.querySelector('[data-ng-app],[ng-app]')).injector().invoke(getRootScope);