Impedire la visualizzazione della notazione di parentesi graffe doppie prima che angular.js compili / interpoli il documento


298

Sembra essere principalmente un problema in IE quando ci sono un certo numero di immagini / script da caricare, può esserci una buona quantità di tempo in cui {{stringExpression}}vengono visualizzati i valori letterali nel markup, quindi scompaiono una volta terminato l'angolazione con la sua compilazione / interpolazione di il documento.

C'è un motivo comune per cui ciò potrebbe accadere, il che indicherebbe che sto facendo qualcosa di generalmente sbagliato, o esiste un modo noto per impedirlo?



Quanto sopra era la soluzione giusta
Edmund Rojas,

Risposte:


283

Penso che tu stia cercando la ngCloakdirettiva: https://docs.angularjs.org/api/ng/directive/ngCloak

Dalla documentazione:

La direttiva ngCloak viene utilizzata per impedire che il modello Angular html venga visualizzato brevemente dal browser nella sua forma grezza (non compilata) durante il caricamento dell'applicazione. Utilizzare questa direttiva per evitare l'effetto sfarfallio indesiderato causato dalla visualizzazione del modello html.

La direttiva può essere applicata <body>all'elemento, ma l'uso preferito è applicare più ngCloak direttive a piccole parti della pagina per consentire il rendering progressivo della vista del browser


1
Per evitare il codice HTML angolare non elaborato, è ngCloakdiffusa / best practice? Sembra un gioco da ragazzi, ma non ho esperienza in AngularJS.
Kevin Meredith,

32
Non penso che funzionerà se carichi tutti gli script alla fine del corpo.
trusktr,

8
Aaah, wait, nvm, la risposta di LOAS è la soluzione se carichi gli script per ultimi. Usa la classe .ng-cloak.
trusktr,

3
Carica lo script angularjs nella <head>sezione del tuo html per ngCloakessere efficace.
Mustafa,

1
Posso confermare che funziona perfettamente se carico angular.jsnella <head>sezione della mia pagina.
Aron Lorincz,

197

Inoltre, puoi usare <span ng-bind="hello"></span>invece di {{hello}}.

http://jsfiddle.net/4LhN9/34/


94
Una caratteristica di ng-bind che a volte viene trascurata è che puoi specificare il testo da visualizzare mentre Angular sta caricando: <span ng-bind = "myScopeProperty"> loading ... </span>. Apparirà "caricamento in corso ...", quindi verrà sostituito una volta definito myScopeProperty.
Mark Rajcok,

@MarkRajcok: grazie per il suggerimento! Non ne avevo idea. È molto semplice ed elegante e risolve un problema che io stesso ho avuto.
Jim Raden,

9
Se hai bisogno di più espressioni, usa ngBindTemplate. Ad esempio, <span ng-bind-template = "{{scopeProperty1}} {{scopeProperty2}}"> caricamento in corso ... </span>
Mark Rajcok,

27
Puoi anche fare {{ciao || 'loading ...'}}
Andrew Joslin,

5
@AndyJoslin Nice. Con questo approccio, lo script angolare js deve essere nella testa, al contrario della parte inferiore della pagina, per evitare che l'espressione {{}} lampeggi quando la pagina viene caricata.
s_t_e_v_e

51

Per migliorare l'efficacia dell'approccio class = 'ng-cloak' quando gli script vengono caricati per ultimi, assicurarsi che il seguente css sia caricato nella testa del documento:

.ng-cloak { display:none; }

4
Aggiungendo! Important non è anche una cattiva idea.
eomeroff,

12
Non visibility: hiddensarebbe meglio?
Aprire il

2
@eomeroff, ma !importantè un hack CSS (cosa negativa) per promuovere uno stile da selezionare, giusto? Infrange le regole del selettore CSS.
Kevin Meredith,

5
IMHO questo è uno dei casi! Importante è stato introdotto per.
lex82,

3
@Mark Immagino che "visibilità: nascosto" renderebbe comunque lo spazio necessario per il markup del modello, mentre "display: none" non rende nulla. Con solo la visibilità nascosta, tutti gli elementi esterni possono improvvisamente crollare alla vera dimensione interna, invece di crescere a dimensioni dal nulla. Suppongo sia qualunque cosa si preferisca. :)
James Wilkins,

40

Aggiungi semplicemente il CSS di cloaking in testa alla pagina o in uno dei tuoi file CSS:

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

Quindi è possibile utilizzare la direttiva ngCloak secondo la normale pratica angolare e funzionerà anche prima che Angular venga caricato.

Questo è esattamente ciò che fa Angular: il codice alla fine di angular.js aggiunge le regole CSS sopra all'inizio della pagina.


+1 Mi sono [ngcloak]inventato il selettore, ma questo è più completo.
Pierre Henry,

1
Risposta fantastica! Carico Angular alla fine del mio corpo, quindi ngCloak non è disponibile e lampeggia ancora {{}}. Questo l'ha risolto.
Scottie,

21

Nel tuo css aggiungi folllowing

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

E poi nel tuo codice puoi aggiungere la direttiva ng-cloak. Per esempio,

<div ng-cloak>
   Welcome {{data.name}}
</div>

Questo è tutto!



3

Sono d'accordo con la risposta di @ pkozlowski.opensource, ma la classe ng-clock non ha funzionato per me per l'utilizzo con ng-repeat. quindi vorrei raccomandarti di usare class per espressioni delimitatrici semplici come {{name}} e la direttiva ngCloak per ng-repeat.

<div class="ng-cloak">{{name}}<div>

e

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>

Grazie per avermi notato l'errore
Jaison,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.