angularjs - 如何统计一个页面上的观看总数？

Question

在 JavaScript 中，有没有办法计算整个页面上 Angular Watch 的数量？

我们使用Batarang ，但它并不总是能满足我们的需求。我们的应用程序很大，我们有兴趣使用自动化测试来检查 watch 计数是否增加太多。

在每个 Controller 的基础上对监视进行计数也很有用。

编辑:这是我的尝试。它对具有 ng-scope 类的所有内容进行计数。

(function () {
    var elts = document.getElementsByClassName('ng-scope');
    var watches = [];
    var visited_ids = {};
    for (var i=0; i < elts.length; i++) {
       var scope = angular.element(elts[i]).scope();
       if (scope.$id in visited_ids) 
         continue;
       visited_ids[scope.$id] = true;
       watches.push.apply(watches, scope.$$watchers);
    }
    return watches.length;
})();

Answer 1

(您可能需要将 body 更改为 html 或您放置 ng-app 的任何位置)

(function () { 
    var root = angular.element(document.getElementsByTagName('body'));

    var watchers = [];

    var f = function (element) {
        angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) { 
            if (element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
                    watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function (childElement) {
            f(angular.element(childElement));
        });
    };

    f(root);

    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
             watchersWithoutDuplicates.push(item);
        }
    });

    console.log(watchersWithoutDuplicates.length);
})();

• 感谢 erilem 指出此答案缺少 $isolateScope 搜索，并且观察者可能在他/她的答案/评论中重复。

• 感谢 Ben2307 指出 'body' 可能需要更改。

<小时/>

原版

我做了同样的事情，只是我检查了 HTML 元素的数据属性而不是它的类。我在这里运行了你的:

http://fluid.ie/

得到了 83。我跑了我的，得到了​​ 121。

(function () { 
    var root = $(document.getElementsByTagName('body'));
    var watchers = [];

    var f = function (element) {
        if (element.data().hasOwnProperty('$scope')) {
            angular.forEach(element.data().$scope.$$watchers, function (watcher) {
                watchers.push(watcher);
            });
        }

        angular.forEach(element.children(), function (childElement) {
            f($(childElement));
        });
    };

    f(root);

    console.log(watchers.length);
})();

我也把这个放在我的:

for (var i = 0; i < watchers.length; i++) {
    for (var j = 0; j < watchers.length; j++) {
        if (i !== j && watchers[i] === watchers[j]) {
            console.log('here');
        }
    }
}

没有打印任何内容，所以我猜测我的更好(因为它找到了更多 watch ) - 但我缺乏深入的 Angular 知识来确定我的不是解决方案集的正确子集。