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

71

在浏览器中加载angularjs应用程序时，有没有一种调试方法？

即。我希望获得$rootScope当前申请的。我该怎么办？

javascript angularjs

— zcaudate
source

75

Batarang +1

另外，您可以通过从控制台执行以下命令，从DOM中的任何元素获取范围

angular.element(DOMNODE).scope()

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

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

angular.element($0).scope()

— 杰米
source

10

+1对于选定的div chrome $ 0。您还可以将$ 1，$ 2用于先前选择的元素。

— Gal Bracha 2012年

9

使用相同的选择器，您可以选择ng-app元素，然后进行操作var $rootScope = angular.element($0).injector().get('$rootScope')并进行播放。

— maxdec 2014年

例如angular.element('body').scope();在您的应用程序的情况下<body data-ng-app="SomeApp">

— raghavsood33

debugInfoEnabled不能为此禁用任何东西。

— 西蒙·威基

47

在开发人员控制台中尝试此操作

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

— 莫兹
source

15

Batarang -AngularJS的Google Chrome插件

安装此之后，您可以执行

console.log（$ rootScope）;

并在Chrome控制台中检查范围对象。

顺便说一句，如果您想获得$ rootScope，则需要注入控制器

喜欢

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

}

— 马克西姆
source

3

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

$ rootScope

— Divya MV
source

3

在开发者控制台angular.element('body').scope();中，如果您的应用是<body data-ng-app="SomeApp">

— raghavsood33
source

1

您可以使用'[ng-app]'代替body，因此它变得通用

— Bernardo Dal Corno

2

只是想补充一点，有一个名为“ Angular Scope Inspector”（当前商店网址）的免费Chrome扩展程序，它将自动检查开发人员工具“元素”标签中所选元素的范围

我今天才发现它，它非常有用，IMO

— 伦道夫
source

2

对于那些正在使用$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);

— 迪米塔尔·内斯托罗夫（Dimitar Nestorov）
source

1

太厉害了并且可能应该被认为是Angularjs的安全性问题：）

— Frane Poljak，

如果AngularJS没有将自己暴露在窗口中，这将无法正常工作。所以我想您可以致电delete window.angular，希望它不会破坏任何内容。

— Dimitar Nestorov