在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

并非所有范围都绑定到元素.如果您想要页面上的所有范围,请像这样遍历范围树:

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 3

我不知道为什么这对你有用,但你可以这样做:

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

另一个选项是使用我们的私有apis:$$ childHead和$$ nextSibling从根作用域开始遍历作用域树.

您更有可能只想查看范围边界的位置,并且可以使用此方法执行此操作:

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

然后,您可以使用Web检查器选择感兴趣的元素并通过以下方式获取其范围:

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

Answer 4

我推荐AngularJS Batarang.它是一个调试工具,可以让您可视化页面上的所有范围(以及其他内容).

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

Answer 5

您可以使用以下方法找出元素的范围:

$(element).scope()

要么

angular.element(element).scope()

我认为没有办法轻松地在页面上获取所有作用域(除了从根作用域向下导航).

Answer 6

您应该在Google Chrome浏览器中开发应用程序(如果您尚未使用它),并且您可以使用真棒Batarang扩展,将新的专用AngularJS面板添加到开发人员工具中.您可以看到那里的所有范围,它们之间的关系是什么,以及具有所有属性的值.

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