angularjs - 如何找到 Batarang 中可见的 AngularJS 范围来自何处？

Question

我正在 Batarang 中查看我的 Angular 应用程序其中一个范围有一些我不认识的值。我怎样才能找出是什么创建了该范围？

我已经尝试在 DOM 中搜索 ng-scope 类。如果有人感兴趣的话，这是我为此提出的解决方案。该函数接受 Batarang 中显示的作用域 ID。

function getElementByScopeId(scopeId) {
    var i;
    var scopesInDom = angular.element('.ng-scope');
    for (i=0; i < scopesInDom.length; i++) {
        if (angular.element(scopesInDom[i]).scope().$id === scopeId) {
            return scopesInDom[i];
        }
    }
};

这对于我在 Batarang 看到的大多数瞄准镜都适用，但找不到我正在寻找的瞄准镜。我认为这是因为它在某个时刻被从 DOM 中删除了。还有其他方法可以找到范围的来源吗？

编辑:找到了。但这只是因为我的应用程序中我不太熟悉的代码很少。它位于我包含的一个模块中，是我没有编写的少数几个模块之一。上面的函数找不到它的原因是它从来不在 DOM 上。它是使用 $rootScope.new(true) 创建的；工厂内部。所以问题仍然存在。有什么方法可以让我从 Batarang 中的可用信息中找到以这种方式创建的作用域的代码吗？

Answer 1

这是我能想到的最好的。

首先(如问题所示)检查您的范围是否在 dom 上。大多数由指令创建的作用域都可以通过这种方式找到。

在浏览器控制台中输入:

function getElementByScopeId(scopeId) {
    var i;
    var scopesInDom = angular.element('.ng-scope');
    for (i=0; i < scopesInDom.length; i++) {
        if (angular.element(scopesInDom[i]).scope().$id === scopeId) {
            return scopesInDom[i];
        }
    }
};

然后，例如，如果您要查找的作用域 ID 是 005，您可以从控制台运行 getElementByScopeId('005') ，它将返回该作用域所在的 DOM 元素创建。

如果无法通过这种方式找到作用域，或者这不足以让您识别作用域，您可以对作用域创建进行堆栈跟踪。这将要求您使用未缩小的源。可能需要这样做的一个示例是，如果服务正在使用诸如 $rootScope.new(true); 之类的内容来创建作用域。

在 Scope.$new 函数返回之前放置一个断点或 console.trace()。在撰写本文时的最新稳定版本 AngularJS v1.2.2 中，第 11119 行。对于较旧的稳定分支 AngularJS v1.0.8 第 7903 行。如果您的范围 id 一致，您可以将其设为条件断点或将跟踪包装在 if 中陈述。如果您无法预测作用域 id 或者您只想查看所有作用域，则您需要使用监视来记下 child.$id 的值(如果使用断点)或消息(如果使用) console.trace() 就像这样 console.trace('new range created: ' + child.$id) 通过使用这些方法之一检查堆栈跟踪，您应该能够确定该范围在哪里创建。