在AngularJS中，如何找到页面上的所有范围？

Question

一旦我们掌握了范围，我们可以导航到其根目录并探索范围层次结构。

但是有没有一种直接的方式来查找页面上的所有范围？

同样给了一个HTML元素，是否有直接的方法来找到它的封闭范围？

Answer 1

，你可以使用这个CSS选择器看到所有范围的页面上

.ng-scope { border: 1px solid red; } 

和所有绑定的：

.ng-binding { border: 1px solid red; } 

然后，可以通过DOM元素转换为选择检索它们

var selector = angular.element(some_dom_element); 

然后使用选择器以检索的范围/控制器/喷射器

var scope = selector.scope(); 
var controller = selector.controller(); 
var injector = selector.injector(); 

Answer 2

可以使用找出元素的范围：

$(element).scope() 

或

angular.element(element).scope() 

我不认为有一种方式来获得一个网页上的所有范围容易（比其他导航从根范围下来）。

Answer 3

我不知道为什么，这将是对你有用，但你可以这样做：

scopeElements = document.getElementsByClassName('ng-scope'); 
scopes = [].map.call(scopeElements, function(e){ return angular.element(e).scope(); }) 

另一种选择是遍历范围树使用我们的API私人在根范围内开始：$ $ childHead和$$ nextSibling。

它更可能你只是想看看那里的范围界限，你可以用这个做到这一点：

scopeElements = document.getElementsByClassName('ng-scope'); 
angular.element(scopeElements).css('border', '1px solid red'); 

然后，你可以使用Web检查来选择感兴趣的元素，并得到其范围由：

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

Answer 4

您应该在Google Chrome浏览器中开发您的应用程序（如果您尚未使用它），并且您可以使用令人敬畏的Batarang扩展，并添加新的专用AngularJS pa nel到Developer工具。 您可以在那里看到所有的范围，它们之间的关系是什么以及具有它所有属性的值是什么。

http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html

Answer 5

我建议AngularJS Batarang。这是一个调试工具，可以让您可视化页面上的所有范围（以及其他内容）。

https://github.com/angular/angularjs-batarang

Answer 6

并非所有范围被绑定到的元素。如果你想页面上的所有范围，这样行走范围树：

function getScopes(root) { 
    var scopes = []; 

    function visit(scope) { 
     scopes.push(scope); 
    } 
    function traverse(scope) { 
     visit(scope); 
     if (scope.$$nextSibling) 
      traverse(scope.$$nextSibling); 
     if (scope.$$childHead) 
      traverse(scope.$$childHead); 
    } 

    traverse(root); 
    return scopes; 
} 

getScopes($rootScope) 

Answer 7

在Angulars有$rootScope，这是每一个scope.It的根具有孩子领域和整个层次是内部$ rootScope。如果你想找到一个带有html元素的作用域，你可能会遇到问题，因为该作用域可能是隔离的作用域。也许你有一个指令，那个作用域是隔离的。如果你有类似的东西那就试试用el.isolatedScope()

Answer 8

在Chrome中，使用开发人员工具。我使用控制台命令行。

中的开发工具的HTML面板选择的元素，并在控制台输入：

angular.element($0).scope() 

或者只是右键点击一个页面元素并选择：检查元素。

$($0).scope()将返回与该元素关联的范围。你可以马上看到它的属性。

要查看元素的父范围：

$($0).scope().$parent 

你可以连续使用，这也：

$($0).scope().$parent.$parent 

你可以看一下根范围：

$($0).scope().$root 

如果你强调了指令与隔离范围，你可以看看它：

$($0).isolateScope() 

如果可用，您可以对子作用域和同级作用域执行相同操作。

$($0).scope().$sibling 

我可以步行上下范围，以验证哪些范围有什么控制器，对象等，当你使用自定义指令的工作，这是必不可少的。在一个庞大的代码库中，找到这样的事情并不容易。

最近，我有两个同名控制器，除了一个大写字母附加到视图。我使用了错误的控制器，并且在我意识到这是我的绑定问题之前花了一段时间。