Angolare - Errore: 10 $ digest() iterazioni raggiunte. Interruzione

Question

sto cercando di mettere un intero casuale nel mio percorso ng-src, come quella:

<div ng-repeat="user in users"> 
     <img ng-src="{{randomPicture()}}" alt=""> 
</div> 

Ed ecco la mia funzione di base nel mio controller: vengono visualizzati

$scope.randomPicture = function(){ 
    var PATH = 'assets/images/'; 
    var image = Math.floor((Math.random() * 12) + 1); 
    var ext = '.jpg'; 
    var randomPic = PATH + image + ext; 

    return randomPic; 
}; 

Le immagini ma nella console ho questo errore:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! 

ho trovato molte domande su che qui in StackOverflow, ma io ancora non riesco a liberarmi di questo errore. Grazie per l'aiuto.

Answer 1

L'associazione è casuale, sarà diversa ogni volta che Angular eseguirà l'osservatore di questa associazione.

Tuttavia, Angular interrompe solo un ciclo di digest quando raggiunge uno stato stabile in cui tutti gli osservatori restituiscono lo stesso valore due volte di seguito, cosa che non succede mai con il tuo.

In breve, non è possibile associare un valore casuale o qualsiasi altro che sia sempre diverso in un attacco angolare. Dovresti generare la tua immagine una volta e opzionalmente ri-randomizzarla in base ad alcuni eventi.

$scope.randomPicture = generateRandomPicture(); 

E

<img ng-src="{{randomPicture}}"> 

UPDATE: E se si desidera aggiornare l'immagine ogni 3 secondi, per esempio, si potrebbe aggiungere

// Generate a new random picture every 3 seconds 
$interval(function() { 
    $scope.randomPicture = generateRandomPicture(); 
}, 3000); 

Aggiornamento 2: Ora che Capisco meglio il tuo problema, o suggerirei di mantenere tutto come è ma usare :: come mostrato sotto se si usa almeno Angular 1.3. In questo modo avrai una sola immagine generata casualmente per utente, ma generata solo una volta.

Su una versione precedente di Angular o in alternativa, è possibile generare un'immagine deterministica per utente che si sentirebbe casuale. per esempio nel vostro uso HTML:

<img ng-src="{{randomPicture($index)}}"> 

E nel controller

var rand1 = Math.round(Math.random()*10); 
var rand2 = Math.round(Math.random()*10); 

$scope.randomPicture = function(index) { 
    var PATH = 'assets/images/'; 
    var image = (index+rand1*rand2)%13 + 1; 
    var ext = '.jpg'; 
    var randomPic = PATH + image + ext; 

    return randomPic; 
}; 

---

Si noti che se si sta utilizzando 1.3+ angolare e vogliono solo per generare l'immagine una volta, è possibile utilizzare ont tempo binding usando l' :: sintassi (usando lo stesso codice per randomPicture):

<img ng-src="{{::randomPicture()}}">