Alternativa a ng-show / -hide o come caricare solo la sezione pertinente del DOM

Quando si utilizza ng-show / -hide, il contenuto incluso in tali blocchi viene inizialmente visualizzato sullo schermo dell’utente. Solo dopo pochi millisecondi (dopo che angular.js è stato caricato ed eseguito), il blocco di destra viene visualizzato in ng-show.

C’è un modo migliore di ng-show / -hide per caricare solo la sezione rilevante di dati nel DOM?

Il problema con ng-view è che posso avere solo uno nella pagina, quindi devo cambiare il comportamento di molte sezioni del DOM in base allo stato corrente.

Per evitare il “flash di contenuti non compilati”, usa ng-bind invece di {{}} o usa ng-cloak :

 Hello, {{name}}! 

Se si utilizza ng-cloak e non si carica Angular.js nella sezione head del codice HTML, sarà necessario aggiungerlo al file CSS e assicurarsi che venga caricato nella parte superiore della pagina:

 [ng\:cloak], [ng-cloak], .ng-cloak { display: none; } 

Nota che devi solo usare queste direttive sulla tua pagina iniziale. Il contenuto che viene inserito successivamente (ad esempio, tramite ng-include, ng-view, ecc.) Verrà compilato da Angular prima del rendering del browser.

Esiste un modo migliore per caricare dati diversi da ng-show / hide, in cui solo la sezione pertinente viene caricata nel DOM.

Alcune alternative a ng-show / ng-hide sono ng-include , ng-switch e (poiché v1.1.5) ng-if :

 

Vedi anche https://stackoverflow.com/a/12584774/215945 per un esempio di ng-switch che funziona insieme a ng-include.

Notate che ng-switch e ng-if aggiungono / rimuovono gli elementi DOM, mentre ng-show / hide altera solo il CSS (se questo è importante per voi).

Ho usato il trucco ng-cloak e non sembra funzionare così bene. Seguendo la documentazione Angular ho aggiunto quanto segue al mio CSS e questo funziona:

 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 

Vedi: http://docs.angularjs.org/api/ng.directive:ngCloak

Per la bella risposta di Mark Rajcok, ecco un CodePen che mostra ng-show, ng-switch e ng-if in action, così puoi confrontare gli approcci e vedere le differenze nel modo in cui il contenuto condizionale viene effettivamente reso.

Si noti che alcune persone ritengono che ng-show sia un po ‘più veloce di ng-switch e ng-se per i modelli basati su file. Ma puoi usare $ templateCache per precaricare i tuoi template in fase di bootstrap, riducendo o eliminando tale vantaggio. Usando ng-switch e ng-if, non è più necessario gestire il contenuto condizionale nascosto che si trova nel DOM quando non è necessario e impedire che espressioni su quel contenuto vengano valutate da Angular in tempi inopportuni. Ciò consente di risparmiare risorse di elaborazione che non è necessario sprecare e di evitare errori che possono essere generati quando qualcosa viene valutato prematuramente.