¿Cómo contar el número total de relojes en una página?

¿Hay alguna manera, en JavaScript, de contar el número de relojes angulares en toda la página?

Usamos Batarang , pero no siempre se adapta a nuestras necesidades. Nuestra aplicación es grande y estamos interesados ​​en utilizar pruebas automatizadas para verificar si el recuento de relojes aumenta demasiado.

También sería útil contar los relojes por controlador.

Editar : aquí está mi intento. Cuenta relojes en todo con clase 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;
})();

(Es posible que deba cambiar bodya htmlo donde sea que coloque su 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);
})();

• Gracias a erilem por señalar que esta respuesta no se realizó la $isolateScopebúsqueda y los observadores posiblemente se duplicaron en su respuesta / comentario.

• Gracias a Ben2307 por señalar que es 'body'posible que sea necesario cambiarlo.

Original

Hice lo mismo, excepto que verifiqué el atributo de datos del elemento HTML en lugar de su clase. Corrí el tuyo aquí:

http://fluid.ie/

Y obtuve 83. Corrí el mío y obtuve 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);
})();

También puse esto en el mío:

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');
        }
    }
}

Y no se imprimió nada, así que supongo que el mío es mejor (en el sentido de que encontró más relojes), pero me falta un conocimiento angular íntimo para saber con certeza que el mío no es un subconjunto adecuado del conjunto de soluciones.

Creo que los enfoques mencionados son inexactos ya que cuentan a los observadores en el mismo alcance doble. Aquí está mi versión de un marcador:

https://gist.github.com/DTFagus/3966db108a578f2eb00d

También muestra algunos detalles más para analizar a los observadores.

Aquí hay una solución hacky que armé en base a la inspección de las estructuras del alcance. Parece funcionar. No estoy seguro de cuán preciso es esto y definitivamente depende de alguna API interna. Estoy usando angularjs 1.0.5.

    $rootScope.countWatchers = function () {
        var q = [$rootScope], watchers = 0, scope;
        while (q.length > 0) {
            scope = q.pop();
            if (scope.$$watchers) {
                watchers += scope.$$watchers.length;
            }
            if (scope.$$childHead) {
                q.push(scope.$$childHead);
            }
            if (scope.$$nextSibling) {
                q.push(scope.$$nextSibling);
            }
        }
        window.console.log(watchers);
    };

Hay un nuevo complemento de Chrome que muestra automáticamente los observadores totales actuales y el último cambio (+/-) en cualquier momento en su aplicación ... es absolutamente increíble.

https://chrome.google.com/webstore/detail/angular-watchers/nlmjblobloedpmkmmckeehnbfalnjnjk

Como recientemente estaba luchando con un gran número de observadores en mi aplicación, también descubrí una gran biblioteca, llamada ng-stats - https://github.com/kentcdodds/ng-stats . Tiene una configuración mínima y le brinda la cantidad de observadores en la página actual + duración del ciclo de resumen. También podría proyectar un pequeño gráfico en tiempo real.

Mejora menor para la respuesta de Words Like Jared .

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

    var f = function (element) {
        if (element.data().hasOwnProperty('$scope')) {
            watchers += (element.data().$scope.$$watchers || []).length;
        }

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

    f(root);

    return watchers;
})();

En AngularJS 1.3.2, countWatchersse agregó un método al módulo ngMock:

/ **
 * Método @ngdoc
 * @name $ rootScope.Scope # $ countWatchers
 * @module ngMock
 * @description
 * Cuenta todos los observadores de ámbitos secundarios directos e indirectos del alcance actual.
 * *
 * Los observadores del alcance actual están incluidos en el conteo y también lo están todos los observadores de
 * aislar los ámbitos infantiles.
 * *
 * @returns {número} Número total de observadores.
 * /

  función countWatchers () 
   {
   var root = angular.element (document) .injector (). get ('$ rootScope');
   recuento var = raíz. $$ observadores? raíz. $$ watchers.length: 0; // incluye el alcance actual
   var pendienteChildHeads = [raíz. $$ childHead];
   var currentScope;

   while (pendienteChildHeads.length) 
    {
    currentScope = PendienteChildHeads.shift ();

    while (currentScope) 
      {
      count + = currentScope. $$ ¿observadores? currentScope. $$ watchers.length: 0;
      pendienteChildHeads.push (currentScope. $$ childHead);
      currentScope = currentScope. $$ nextSibling;
      }
    }

   cuenta de retorno;
   }

Referencias

• Registro de cambios AngularJS: 1.3.2

• ngMock: $ rootScope.Scope. $ countWatchers

Tomé el siguiente código directamente de la $digestfunción en sí. Por supuesto, probablemente necesite actualizar el selector de elementos de la aplicación ( document.body) en la parte inferior.

(function ($rootScope) {
    var watchers, length, target, next, count = 0;

    var current = target = $rootScope;

    do {
        if ((watchers = current.$$watchers)) {
            count += watchers.length;
        }

        if (!(next = (current.$$childHead ||
                (current !== target && current.$$nextSibling)))) {
            while (current !== target && !(next = current.$$nextSibling)) {
                current = current.$parent;
            }
        }
    } while ((current = next));

    return count;
})(angular.element(document.body).injector().get('$rootScope'));

Estas son las funciones que uso:

/**
 * @fileoverview This script provides a window.countWatchers function that
 * the number of Angular watchers in the page.
 *
 * You can do `countWatchers()` in a console to know the current number of
 * watchers.
 *
 * To display the number of watchers every 5 seconds in the console:
 *
 * setInterval(function(){console.log(countWatchers())}, 5000);
 */
(function () {

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

  var countWatchers_ = function(element, scopes, count) {
    var scope;
    scope = element.data().$scope;
    if (scope && !(scope.$id in scopes)) {
      scopes[scope.$id] = true;
      if (scope.$$watchers) {
        count += scope.$$watchers.length;
      }
    }
    scope = element.data().$isolateScope;
    if (scope && !(scope.$id in scopes)) {
      scopes[scope.$id] = true;
      if (scope.$$watchers) {
        count += scope.$$watchers.length;
      }
    }
    angular.forEach(element.children(), function (child) {
      count = countWatchers_(angular.element(child), scopes, count);
    });
    return count;
  };

  window.countWatchers = function() {
    return countWatchers_(root, {}, 0);
  };

})();

Esta función utiliza un hash para no contar el mismo alcance varias veces.

Hay una función recursiva publicada por el blog de Lars Eidnes en http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/ para recopilar el número total de observadores. Comparo el resultado usando la función publicada aquí y la que publicó en su blog, que ha generado un número ligeramente mayor. No puedo decir cuál es más preciso. Acabo de agregar aquí como referencia cruzada.

function getScopes(root) {
    var scopes = [];
    function traverse(scope) {
        scopes.push(scope);
        if (scope.$$nextSibling)
            traverse(scope.$$nextSibling);
        if (scope.$$childHead)
            traverse(scope.$$childHead);
    }
    traverse(root);
    return scopes;
}
var rootScope = angular.element(document.querySelectorAll("[ng-app]")).scope();
var scopes = getScopes(rootScope);
var watcherLists = scopes.map(function(s) { return s.$$watchers; });
_.uniq(_.flatten(watcherLists)).length;

NOTA: es posible que necesite cambiar "ng-app" a "data-ng-app" para su aplicación Angular.

La respuesta de Plantian es más rápida: https://stackoverflow.com/a/18539624/258482

Aquí hay una función que escribí a mano. No pensé en usar funciones recursivas, pero esto es lo que hice en su lugar. Puede ser más delgado, no lo sé.

var logScope; //put this somewhere in a global piece of code

Luego ponga esto dentro de su controlador más alto (si usa un controlador global).

$scope.$on('logScope', function () { 
    var target = $scope.$parent, current = target, next;
    var count = 0;
    var count1 = 0;
    var checks = {};
    while(count1 < 10000){ //to prevent infinite loops, just in case
        count1++;
        if(current.$$watchers)
            count += current.$$watchers.length;

        //This if...else is also to prevent infinite loops. 
        //The while loop could be set to true.
        if(!checks[current.$id]) checks[current.$id] = true;
        else { console.error('bad', current.$id, current); break; }
        if(current.$$childHead) 
            current = current.$$childHead;
        else if(current.$$nextSibling)
            current = current.$$nextSibling;
        else if(current.$parent) {
            while(!current.$$nextSibling && current.$parent) current = current.$parent;
            if(current.$$nextSibling) current = current.$$nextSibling;
            else break;
        } else break;
    }
    //sort of by accident, count1 contains the number of scopes.
    console.log('watchers', count, count1);
    console.log('globalCtrl', $scope); 
   });

logScope = function () {
    $scope.$broadcast('logScope');
};

Y finalmente un mercado de libros:

javascript:logScope();

Un poco tarde para esta pregunta, pero yo uso esto

angular.element(document.querySelector('[data-ng-app]')).scope().$$watchersCount

solo asegúrese de utilizar el querySelector correcto.