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

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 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: wird geladen ... . "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: Laden ...

— 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

6

Sie können auch ng-attr-src="{{variable}}"anstelle von verwenden src="{{variable}}"und das Attribut wird erst generiert, wenn der Compiler die Vorlagen kompiliert hat. Dies wird hier in der Dokumentation erwähnt: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

— Martin Schüller
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,