Debug del ciclo di digest di Angular: come trovare la causa di un ciclo infinito?

Question

Attualmente sto lavorando su qualche codice con contenuto pigro + controller. Il mio codice funziona fondamentalmente come this fiddle. Tuttavia, per qualche ragione, la mia versione non funziona, e invece ottengo an infinite digest cycle ogni volta che angolare tenta di aggiornare la sua vista.

Il problema scompare quando rimuovo ng-include da questa semplice affermazione di ripetizione:

<div class="container" ng-repeat="pageName in pageNames"> 
    <div ng-include="pageName"></div> 
</div> 

parte più strana: Il exact same error si verifica anche se pageNames non viene mai assegnato al campo di applicazione. Entrambi gli ambiti (l'ambito del controller esterno e interno - I have each one) possono essere completamente vuoti (ho controllato con Batarang - Ho solo due ambiti vuoti), e ottengo ancora l'errore.

Il mio codice è un po 'troppo complicato, con troppe altre dipendenze, quindi postarlo qui non ha senso. La versione più pura è il violino sopra. Non riesco a trovare una differenza nella logica tra i due. Quando ho ispezionare i miei scopi con Batarang, non vedo nulla di sospetto o:

• non sto usando funzioni nei miei ambiti
• non ho fatto uso di $watch
• Non ho fatto uso di ng-model

Concludo che non sto cambiando esplicitamente nulla, quindi deve essere qualcosa sotto il cappuccio dell'angolare.

Posso in qualche modo ottenere Angular o Batarang per dirmi quali variabili di ambito sono cambiate dopo un'iterazione di digest, quindi posso identificare il colpevole che causa il ciclo infinito?

UPDATE:

ho finalmente capito che history.pushState pasticci tutto. Sto ora esaminando le alternative, come il servizio $location. Tuttavia, mi piacerebbe ancora sapere come eseguire il debug di questo tipo di problema in generale. Qualche suggerimento?

Answer 1

Non esiste un modo diretto per ottenere un elenco di variabili di ambito modificate in ogni digest, ma è molto semplice modificare la sorgente di Angular per farlo (temporaneamente) se ci si trova in una situazione di debug di emergenza. Il codice $ digerire è qui:

angular.js > src > ng > rootScope.js

Se si guarda a questo metodo vedrete riferimenti a una matrice watchLog. AngularJS usa questo per segnalare utili messaggi di errore quando rileva il loop come si sta ottenendo. Potresti facilmente aggiungere alcuni elementi di console.log qui o mantenere il tuo array che potresti loggare in seguito o ispezionare con il tuo debugger. Puoi anche impostare i breakpoint qui per vedere cosa sta succedendo.

Non mi è chiaro perché history.pushState() avrebbe a che fare con questo perché la tua domanda originale non parla dell'uso di $ posizione, cronologia o funzioni correlate. Tuttavia, si noti che è un problema MOLTO comune con ngInclude creare loop infiniti quando i percorsi non sono quelli che ci si aspetta. Un numero enorme di progetti lato server (ad esempio NodeJS) sono configurati per restituire la pagina home/indice quando una risorsa non viene trovata perché presuppone che il routing front-end sia attivo. Questo è in realtà un grosso problema perché finisci per incorporare la tua home page nella tua home page, che poi incorpora un'altra copia, ecc.Vedo questo tipo di problema pubblicato circa una volta alla settimana qui su S/O.

Un semplice test per questo è di modificare il server per restituire un 404 vuoto per qualsiasi risorsa non trovata. Lo consiglio sempre quando qualcuno menziona "loop infinito" e qualsiasi tipo di operazione di caricamento degli asset: ui-router, ngRoute, ngInclude, ecc.

Ciò è particolarmente comune quando si utilizzano URL relativi nei percorsi.