31

一旦我们有了一个范围，我们就可以导航到它的根并探索范围层次结构。

但是有没有一种直接的方法可以找到页面上的所有范围？

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

4

8 回答 8

80

您可以使用此 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();
于 2012-05-11T19:18:24.343 回答
23

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

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)
于 2014-02-14T10:16:16.793 回答
16

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

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();
于 2012-05-11T18:37:47.560 回答
10

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

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

于 2012-08-21T16:39:13.560 回答
7

您可以使用以下方法找到元素的范围：

$(element).scope()

或者

angular.element(element).scope()

我认为没有一种方法可以轻松地获取页面上的所有范围（除了从根范围向下导航）。

于 2012-05-09T22:24:28.100 回答
5

您应该在 Google Chrome 浏览器中开发您的应用程序（如果您还没有使用它），然后您可以使用很棒的 Batarang 扩展程序，它将新的专用 AngularJS 面板添加到开发人员工具中。您可以在那里看到所有范围，它们之间的关系是什么以及具有其所有属性的值。

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

于 2012-08-02T07:48:37.463 回答
1

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

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

angular.element($0).scope()

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

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

要查看元素父范围：

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

您也可以将其链接：

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

您可以查看根范围：

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

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

$($0).isolateScope()

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

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

我可以在范围内来回走动，以验证哪个范围有哪些控制器、对象等，当您使用自定义指令时，这是必不可少的。在大型代码库中，要找到这样的东西并不容易。

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

于 2017-04-27T19:08:18.057 回答
0

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

于 2015-07-24T22:06:39.987 回答