Angularjs infinite $ digest Loop lorsque aucun changement de portée

J'obtiens l'erreur ci-dessous dans mon angulaire de code. J'ai du mal à comprendre pourquoi la fonction getDrawWithResults serait la cause d'une digérer cycle comme il ne semble pas y avoir d'effets secondaires? Elle renvoie simplement des éléments d'une liste qui ont une propriété définie sur true.

L'erreur se produit uniquement lors de la première utilisation de getDrawWithResults est sur la page, si j'enlève l'erreur s'arrête.

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["getDrawsWithResults(selectedLottery.draws); newVal: []; oldVal: []"],["getDrawsWithResults(selectedLottery.draws); newVal: []; oldVal: []"],["getDrawsWithResults(selectedLottery.draws); newVal: []; oldVal: []"],["getDrawsWithResults(selectedLottery.draws); newVal: []; oldVal: []"],["getDrawsWithResults(selectedLottery.draws); newVal: []; oldVal: []"]]

C'est mon code:

HTML

<h4 ng-cloak ng-hide="getDrawsWithResults(selectedLottery.draws)">Results of Selected Lottery</h4>

<div class="con" ng-repeat="draw in getDrawsWithResults(selectedLottery.draws)" ng-cloak>
    <h5 class="con__header">[[ draw.date|date:'EEEE d MMMM yyyy - H:mm' ]]</h5>
    <div class="balls-list__outer con__row">
        <div class="balls-list">
            <div class="balls-list__ball__outer" ng-repeat="b in draw.results">
                <button class="balls-list__ball btn btn-con">[[ b ]]</button>
            </div>

        </div>
    </div>
</div>

JS

//return list of draws with results
$scope.getDrawsWithResults = function(draws) {
    return _.filter(draws, function(draw){
        return draw.results && draw.results.length > 0;
    });
}

source d'informationauteur foiseworth

14

Je suppose _.filter retourne une nouvelle instance de l'objet array à chaque fois qu'il est exécuté. Cela provoque angulaire de l'implicite $watches comme:
```
ng-hide="getDrawsWithResults(selectedLottery.draws)"
```
et
```
ng-repeat="draw in getDrawsWithResults(selectedLottery.draws)"
```
à penser que le modèle a changé, donc il a besoin pour digérer nouveau.

Je voudrais mettre en œuvre un filtre
```
app.filter('withResults', function() {
    return function(draws) {
        return _.filter(draws, function(draw){
            return draw.results && draw.results.length > 0;
        });
    }
})
```
et de l'appliquer comme ça (voir MODIFIER ci-dessous):
```
ng-hide="selectedLottery.draws | withResults"
```
et
```
ng-repeat="draw in selectedLottery.draws | withresults"
```
ÉDITÉE après la discussion dans les commentaires

Le problème réel est cette liaison:
```
ng-hide="getDrawsWithResults(selectedLottery.draws)"
```
ng-hide enregistre une montre qui sera le feu à jamais depuis la référence de l'filtré tableau change toujours. Il peut être modifié à:
```
ng-hide="getDrawsWithResults(selectedLottery.draws).length > 0"
```
et le filtre correspondant:
```
ng-hide="(selectedLottery.draws | withResults).length > 0"
```
ng-repeat n'ont pas le même problème car elle enregistre un $watchCollection.
7

Cela implique $scope.getDrawsWithResults() n'est pas idempotent. Compte tenu de l'entrée et de l'état, il n'est pas toujours retournent le même résultat. Et ng-hide implique un idempotent de la fonction (comme le font toutes les fonctions qui Angulaire a une montre).

En bref, vous avez peut-être préférable d'utiliser une fonction qui retourne un booléen résultat au lieu de _.filter qui retourne un tableau. Peut-être _.all?

La raison idempotence ici, c'est parce que de la façon Angulaire de dollars de digérer le cycle. En raison de votre ng-hide Angulaire des lieux d'une montre sur les résultats de votre $scope.getDrawsWithResults(). De cette manière, il peut être averti chaque fois qu'il doit ré-évaluer la ng-hide. Votre ng-repeat n'est pas touchée parce que c'est des résultats n'avez pas besoin d'être regardé par Angulaire.

Donc chaque fois qu'un $digest qui se passe (ce qui est le nombre de fois par seconde) $scope.getDrawsWithResults() est appelé pour voir si c'est des résultats changé depuis le précédent $digest cycle et donc si elle doit changer ng-hide. Si le résultat a changé Angulaire sait cela pourrait également signifier une autre fonction, il est en train de regarder (possiblement utilise un résultat de votre fonction) pourrait avoir changé. Il se doit donc de relancer $digest (laissant le changement se propager à travers le système en cas de besoin).

Et donc $digest continue de fonctionner jusqu'à ce que les résultats de toutes les fonctions de regarder cessent de changer. Ou jusqu'à ce qu'il y a eu 10 $digest cycles. Angulaire suppose que si le système n'est pas stable après 10 cycles il ne sera probablement jamais se stabiliser. Et donc ça donne et jette le message d'erreur que vous avez obtenu.

Vous pouvez plonger dans tout cela plus en profondeur ici si vous souhaitez: http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html

Vous devez vous connecter pour publier un commentaire.

HTML

JS

ÉDITÉE après la discussion dans les commentaires