Filtre angulaire des œuvres, mais des causes “10 $digest itérations atteint”

Bon, je pense que j'ai tout compris. Commencez par prendre un coup d'oeil à la le code source pour ngRepeat. Avis de la ligne 199: C'est là que nous avons mis en place des montres sur le tableau/objet de nous répéter, de sorte que, si elle ou de ses éléments de changer un digest cycle sera déclenchée:

$scope.$watchCollection(rhs, function ngRepeatAction(collection){

Maintenant, nous avons besoin de trouver la définition de $watchCollection, qui commence à la ligne 360 de rootScope.js. Cette fonction est passée dans notre tableau ou d'un objet d'expression, qui dans notre cas est hamburgers | ownerGrouping. Sur la ligne 365 que l'expression de chaîne est transformé en une fonction à l'aide de la $parse service, une fonction qui sera appelé plus tard, et chaque fois que cet observateur s'exécute:

var objGetter = $parse(obj);

Cette nouvelle fonction, qui permettra d'évaluer notre filtre et obtenir le tableau qui en résulte, est appelée à juste quelques lignes plus bas:

newValue = objGetter(self);

Donc newValue contient le résultat de nos données filtrées, après groupBy a été appliquée.

Suivante, faites défiler jusqu'à la ligne de 408 et de prendre un coup d'oeil à ce code:

        //copy the items to oldValue and look for changes.
        for (var i = 0; i < newLength; i++) {
          if (oldValue[i] !== newValue[i]) {
            changeDetected++;
            oldValue[i] = newValue[i];
          }
        }

La première fois en cours d'exécution, oldValue est juste un tableau vide (défini ci-dessus comme "internalArray"), de sorte qu'un changement est détecté. Cependant, chacun de ses éléments seront mis à l'élément correspondant de newValue, de sorte que nous nous attendons à ce que la prochaine fois il fonctionne tout doit correspondre et aucun changement ne sera détecté. Alors, quand tout fonctionne normalement, ce code sera exécuté deux fois. Une fois le programme d'installation, qui détecte un changement à partir de l'initiale nulle état, puis, une fois encore, parce que le détectés forces de changement une nouvelle digérer cycle à exécuter. Dans le cas normal, aucun changement ne sera détecté lors de ce 2e terme, parce que à ce moment (oldValue[i] !== newValue[i]) sera false pour tous je. C'est pourquoi vous avez été voir les 2 console.journal des sorties dans votre exemple.

Mais dans votre cas d'échec, votre code de filtrage est la génération d'un nouveau tableau avec les nouveaux elments chaque fois qu'il est exécuté. Bien que ce nouveau tableau de elments ont la même valeur que les anciens éléments du tableau (c'est une copie parfaite), ils sont pas les mêmes éléments réels. Qui est, ils renvoient à des objets en mémoire que le fait de simplement arriver à avoir les mêmes propriétés et les valeurs. Donc dans votre cas oldValue[i] !== newValue[i] sera toujours vrai, pour la même raison que, par exemple, {x: 1} !== {x: 1} est toujours vrai. Et un changement sera toujours détecté.

De sorte que le problème essentiel est que votre filtre est la création d'une nouvelle copie du tableau chaque fois qu'il est exécuté, composé de de nouveaux éléments qui sont des copies de l'original du tableau elments. Donc, l'observateur de l'installation par ngRepeat obtient juste coincé dans ce qui est essentiellement une infinie boucle récursive, toujours de la détection d'un changement et le déclenchement d'un nouveau digérer cycle.

Voici une version simplifiée de votre code qui recrée le même problème: http://plnkr.co/edit/KiU4v4V0iXmdOKesgy7t?p=preview

Le problème disparaît si le filtre s'arrête la création d'un nouveau tableau à chaque fois qu'il est exécuté.

Merci pour le memoize solution, il fonctionne très bien.

Cependant, _.memoize utilise la première passées en paramètre la clé par défaut pour son cache. Cela pourrait ne pas être très pratique, surtout si le premier paramètre sera toujours la même référence. J'espère que ce comportement est configurable via l' resolver paramètre.

Dans l'exemple ci-dessous, le premier paramètre sera toujours la même matrice, et la seconde une chaîne de caractères représentant sur le champ dans lequel il doit être regroupées par:

return _.memoize(function(collection, field) {
    return _.groupBy(collection, field);
}, function resolver(collection, field) {
    return collection.length + field;
});

Je ne suis pas sûr pourquoi cette erreur est à venir, mais, logiquement, la fonction de filtre est appelée pour chaque élément de la matrice.

Dans votre cas, la fonction de filtre que vous avez créé retourne une fonction qui ne doit être appelée que lorsque le tableau est mis à jour, pas pour chaque élément du tableau. Le résultat renvoyé par la fonction peut alors être limité à html.

J'ai forké le plunker et ont créé ma propre mise en œuvre d'ici http://plnkr.co/edit/KTlTfFyVUhWVCtX6igsn

Il n'utilise pas de filtre. L'idée de base est d'appeler le groupBy au début et à chaque fois qu'un élément est ajouté

$scope.ownerHamburgers=_.groupBy(hamburgers, function(item) {
      return item.owner;
    });



$scope.addBurger = function() {
    hamburgers.push({
      name : "Mc Fish",
      owner :"Mc Donalds"
    });
    $scope.ownerHamburgers=_.groupBy(hamburgers, function(item) {
      return item.owner;
    });
  }