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

在Angulars中有$rootScope，它是每个范围的根。它有子字段，整个层次结构在 $ rootScope 内。如果你想要要找到一个带有html元素的范围，你可能会遇到问题，因为那个范围可以是隔离范围。也许你有一个指令，哪个范围是隔离的。如果你有类似的东西，试试使用 el.isolatedScope()

Answer 7

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

在开发人员工具的HTML面板中选择一个元素，然后在控制台中输入：

angular.element($0).scope()

或者只需右键单击页面元素并选择：inspect element。

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

要查看元素父作用域：

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

你也可以链接这个：

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

您可以查看根范围：

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

如果您突出显示了具有隔离范围的指令，您可以使用以下命令查看它：

$($0).isolateScope()

如果可用，您可以对子范围和兄弟范围执行相同的操作。

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

我可以在示波器上上下移动来验证哪些控制器，对象等具有范围，以及何时使用自定义指令，这是必不可少的。在大型代码库中，找到这样的东西并不容易。

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

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

7 个答案: