AngularJs - Errore: 10 $ digest() iterazioni raggiunte. Abortire

Question

Sto provando a creare una griglia di tipo Metro Tile con Angolare, per ottenere ciò voglio che ognuna delle piastrelle sia di un colore diverso. Quindi il mio piano d'azione era di creare una funzione che selezionasse casualmente un colore all'interno di un ciclo (usando ng-repeat). Ecco quello che ho finora ....

<div class={{RandomColourClass()}} ng-repeat="stockRecord in GridStockRecords | filter:searchText"> 
    <div > 
    <h6>{{stockRecord.ProductGroupName}}</h6> 
    </div> 
</div> 

Quindi, come si può vedere io pongo il nome della classe con una funzione chiamata RandomColourClass, ecco i bit JS

$scope.TileColours = [{colour:'thumbnail tile tile-blue'},{colour:'thumbnail tile tile-green'},{colour:'thumbnail tile tile-red'}]; 

$scope.RandomColourClass = function(){ 
    var randomColour = $scope.TileColours[Math.floor(Math.random() * $scope.TileColours.length)]; 
    return randomColour.colour.toString(); 
}; 

Questa tutte le opere fine e le piastrelle sono di diversi colori, ma continuo a ricevere il seguente errore

Error: 10 $digest() iterations reached. Aborting!".

ho dato un'occhiata in altri posti in giro per il problema, ma non riesco a capire che cosa ho bisogno di cambiare per farlo funzionare !? Qualsiasi aiuto o direzione sarebbe molto apprezzato :)

Answer 1

Angolare esegue una funzione digest per aggiornare il DOM quando i dati cambiano.

Durante il digest, ricalcola tutti i valori associati al DOM, in questo caso {{RandomColorClass()}}. Se qualcuno cambia, esegue nuovamente un ciclo di digest (poiché alcune variabili possono dipendere dal valore della variabile modificata, ad esempio).

Lo fa ripetutamente fino a quando due digesti di riga danno gli stessi valori - cioè, nulla è cambiato.

Ciò che accade è che quando si verifica un digest, viene chiamata la propria funzione e viene restituito un valore diverso. Questo innesca un digest aggiuntivo, dove RandomColorClass() restituisce nuovamente un valore diverso, che attiva un altro digest ...

Puoi vedere dove sta andando? Non dovresti generare valori casuali in questo modo - invece, generarli nel tuo ambito e persisterli.

Un approccio potrebbe essere, nel campo di applicazione:

function randomColourClass() { /* ... */ }; 

$scope.GridStockRecords.forEach(function(record) { 
    record.colorClass = randomColourClass(); 
}); 

e HTML:

<div ng-repeat="stockRecord in GridStockRecords | filter:searchText" 
     ng-class="stockRecord.colorClass"> 
     <div> 
     <h6>{{stockRecord.ProductGroupName}}</h6> 
     </div> 
    </div> 

Answer 2

risposta estranei a questa particolare domanda, ma sto aggiungendo qui perché è sul fronte di Google pagina quando si cerca il messaggio di errore e ci ho messo un po 'fino a quando ho capito:

Ho avuto qualcosa di simile a mio avviso:

<custom-tag data="[1,2,3]"/> 

E il controllore del tag personalizzato aveva un osservatore impostato su $scope.data. Ciò ha provocato l'errore di AngularJS perché ogni volta che ha ricontrollato il valore di data ha ottenuto un nuovo oggetto dalla vista (ricorda che l'array è un oggetto), quindi non ha mai finito di digerirlo correttamente.

Answer 3

Ho avuto lo stesso problema in IE10 diventa ut il problema era che stavo reindirizzando usando window.location.

window.location = "#route/yada"; 

cambiato il codice per

$location.path("/route/yada); 

E che ha risolto i miei problemi. = D

Answer 4

Ho riscontrato questo errore quando ho digitato erroneamente ng-class = "submit()" invece di ng-click = "submit()". Non riesco a immaginare nessun altro fare un errore così sciocco, ma per la cronaca, questo è un altro modo per creare 10 $ digest() iterazioni raggiunte in caso di interruzione!