Verhindern Sie, dass die doppelte geschweifte Klammer kurz angezeigt wird, bevor angle.js das Dokument kompiliert / interpoliert

298

Es scheint in erster Linie ein Problem im IE zu sein, wenn eine Reihe von Bildern / Skripten geladen werden müssen. Es kann eine gute Zeitspanne geben, in der das Literal {{stringExpression}}im Markup angezeigt wird und dann verschwindet, sobald der Winkel mit der Kompilierung / Interpolation von fertig ist das Dokument.

Gibt es einen häufigen Grund dafür, der darauf hinweist, dass ich im Allgemeinen etwas falsch mache, oder gibt es einen bekannten Weg, dies zu verhindern?

angularjs JeremyWeir
quelle
6
Dies könnte helfen: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls
Ismael
Das obige war die richtige Lösung
Edmund Rojas

Antworten:

283

Ich denke, dass Sie nach der ngCloakRichtlinie suchen : https://docs.angularjs.org/api/ng/directive/ngCloak

Aus der Dokumentation:

Die ngCloak-Direktive wird verwendet, um zu verhindern, dass die Angular-HTML-Vorlage vom Browser kurz in ihrer rohen (nicht kompilierten) Form angezeigt wird, während Ihre Anwendung geladen wird. Verwenden Sie diese Anweisung, um den unerwünschten Flickereffekt zu vermeiden, der durch die Anzeige der HTML-Vorlage verursacht wird.

Die Direktive kann auf das <body>Element angewendet werden. Die bevorzugte Verwendung besteht jedoch darin, mehrere ngCloak Direktiven auf kleine Teile der Seite anzuwenden , um ein progressives Rendern der Browseransicht zu ermöglichen

pkozlowski.opensource
quelle
1
Ist es ngCloakweit verbreitet / Best Practice, um den rohen Angular-HTML-Code zu vermeiden ? Es scheint ein Kinderspiel zu sein, aber ich habe keine Erfahrung mit AngularJS.
Kevin Meredith
32
Ich denke nicht, dass dies funktionieren wird, wenn Sie alle Skripte am Ende des Körpers laden.
Trusktr
8
Aaah, warte, nvm, die Antwort von LOAS ist die Lösung, wenn du zuletzt Skripte lädst. Verwenden Sie die .ng-cloak-Klasse.
Trusktr
3
Laden Sie das AngularJS-Skript im <head>Abschnitt Ihres HTML- Codes ngCloak, um effektiv zu sein.
Mustafa
1
Ich kann bestätigen, dass es einwandfrei funktioniert, wenn ich angular.jsin den <head>Bereich meiner Seite lade .
Aron Lorincz
197

Sie können auch <span ng-bind="hello"></span>anstelle von verwenden {{hello}}.

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

Andrew Joslin
quelle
94
Eine Funktion über ng-bind, die manchmal übersehen wird, ist, dass Sie Text angeben können, der angezeigt werden soll, während Angular geladen wird: <span ng-bind = "myScopeProperty"> wird geladen ... </ span>. "Laden ..." wird angezeigt und ersetzt, sobald myScopeProperty definiert ist.
Mark Rajcok
@ MarkRajcok: Danke für den Tipp! Ich hatte keine Ahnung. Das ist sehr einfach und elegant und löst ein Problem, das ich selbst hatte.
Jim Raden
9
Wenn Sie mehrere Ausdrücke benötigen, verwenden Sie ngBindTemplate. Beispiel: <span ng-bind-template = "{{scopeProperty1}} {{scopeProperty2}}"> Laden ... </ span>
Mark Rajcok
27
Sie können auch {{Hallo || 'Laden ...'}}
Andrew Joslin
5
@ AndyJoslin Schön. Bei diesem Ansatz muss sich das eckige js-Skript im Kopf und nicht am Ende der Seite befinden, damit der Ausdruck {{}} beim Laden der Seite nicht blinkt.
s_t_e_v_e
51

Stellen Sie sicher, dass das folgende CSS im Kopf des Dokuments geladen ist, um die Effektivität des Ansatzes class = 'ng-cloak' beim letzten Laden von Skripten zu verbessern:

.ng-cloak { display:none; }
LOAS
quelle
4
Hinzufügen! Wichtig ist auch keine schlechte Idee.
Eomeroff
12
Wäre nicht visibility: hiddenbesser?
Mpen
2
@eomeroff, aber !importantist ein CSS- Hack (eine schlechte Sache), um einen Stil zu fördern, der ausgewählt werden soll, oder? Es verstößt gegen die CSS-Auswahlregeln.
Kevin Meredith
5
IMHO ist dies einer der Fälle! Wichtig wurde für eingeführt.
Lex82
3
@Mark Ich würde vermuten, dass "Sichtbarkeit: versteckt" immer noch den für das Vorlagen-Markup benötigten Platz rendert, während "Anzeige: keine" überhaupt nichts rendert. Wenn nur die Sichtbarkeit verborgen ist, können alle äußeren Elemente plötzlich auf die wahre innere Größe zusammenfallen, anstatt aus dem Nichts heraus zu wachsen. Ich nehme an, es ist das, was man bevorzugt. :)
James Wilkins
40

Fügen Sie einfach das Tarn-CSS zum Kopf der Seite oder zu einer Ihrer CSS-Dateien hinzu:

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

Dann können Sie die ngCloak-Direktive gemäß der normalen Angular-Praxis verwenden, und sie funktioniert noch, bevor Angular selbst geladen wird.

Genau das macht Angular: Der Code am Ende von angle.js fügt die obigen CSS-Regeln am Kopf der Seite hinzu.

Bennett McElwee
quelle
+1 Ich habe [ngcloak]mir den Selektor selbst ausgedacht, aber dieser ist vollständiger.
Pierre Henry
1
Super Antwort! Ich lade Angular am Ende meines Körpers, daher ist ngCloak nicht verfügbar und es blinkt immer noch das {{}}. Dies hat es behoben.
Scottie
21

Fügen Sie in Ihrem CSS Folgendes hinzu

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

Und dann können Sie in Ihrem Code die ng-cloak-Direktive hinzufügen. Zum Beispiel,

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

Das ist es!

Nathan Senevirathne
quelle
3

Ich stimme der Antwort von @ pkozlowski.opensource zu, aber die ng-clock-Klasse funktionierte bei mir nicht für die Verwendung mit ng-repeat. Daher möchte ich Ihnen empfehlen, class für einfache Trennzeichen wie {{name}} und ngCloak für ng-repeat zu verwenden.

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

und 

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>
Jaison
quelle
Vielen Dank, dass Sie mich auf den Fehler aufmerksam gemacht haben
Jaison,