Zapobiegaj wyświetlaniu notacji nawiasów klamrowych na chwilę przed kompilacją / interpolacją dokumentu przez angular.js

298

Wydaje się, że jest to przede wszystkim problem w IE, gdy do załadowania jest wiele obrazów / skryptów, może być sporo czasu, w którym {{stringExpression}}wyświetlane są literały w znacznikach, a następnie znikają, gdy skończy się kompilacja / interpolacja dokument.

Czy istnieje wspólny powód, dla którego tak się dzieje, który wskazywałby, że robię coś ogólnie źle, lub czy istnieje znany sposób, aby temu zapobiec?

JeremyWeir
źródło
Powyższe było właściwym rozwiązaniem
Edmund Rojas

Odpowiedzi:

283

Myślę, że szukasz ngCloakdyrektywy: https://docs.angularjs.org/api/ng/directive/ngCloak

Z dokumentacji:

Dyrektywa ngCloak służy do zapobiegania wyświetlaniu szablonu Angular HTML w przeglądarce w postaci nieprzetworzonej (nieskompilowanej) podczas ładowania aplikacji. Użyj tej dyrektywy, aby uniknąć niepożądanego efektu migotania spowodowanego wyświetlaniem szablonu HTML.

Dyrektywę można zastosować do <body>elementu, ale preferowanym zastosowaniem jest zastosowanie wielu ngCloak dyrektyw do małych części strony, aby umożliwić stopniowe renderowanie widoku przeglądarki

pkozlowski.opensource
źródło
1
Czy w celu uniknięcia surowego kodu Angular HTML ngCloakpowszechne są najlepsze praktyki? Wydaje się to oczywiste, ale nie mam doświadczenia w AngularJS.
Kevin Meredith,
32
Nie sądzę, że to zadziała, jeśli załadujesz wszystkie skrypty na końcu ciała.
trusktr
8
O tak, czekaj, nvm, odpowiedź LOAS jest rozwiązaniem, jeśli ładujesz skrypty jako ostatnie. Użyj klasy .ng-cloak.
trusktr
3
Załaduj skrypt angularjs w <head>sekcji swojego HTML, ngCloakaby był skuteczny.
Mustafa
1
Mogę potwierdzić, że działa idealnie, jeśli załaduję angular.jsw <head>sekcji mojej strony.
Aron Lorincz
197

Możesz także użyć <span ng-bind="hello"></span>zamiast {{hello}}.

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

Andrew Joslin
źródło
94
Jedną z funkcji ng-bind, która jest czasami pomijana, jest to, że możesz określić tekst do wyświetlenia podczas ładowania Angulara: <span ng-bind = "myScopeProperty"> ładowanie ... </span>. Pojawi się komunikat „ładowanie ...”, a następnie zostanie zastąpiony po zdefiniowaniu myScopeProperty.
Mark Rajcok
@MarkRajcok: dzięki za wskazówkę! Nie mam pojęcia. To bardzo proste i eleganckie i rozwiązuje problem, który sam miałem.
Jim Raden
9
Jeśli potrzebujesz wielu wyrażeń, użyj ngBindTemplate. Np. <Span ng-bind-template = "{{scopeProperty1}} {{scopeProperty2}}"> ładowanie ... </span>
Mark Rajcok
27
Możesz także zrobić {{hello || „ładowanie ...”}}
Andrew Joslin
5
@AndyJoslin Nice. Przy takim podejściu kątowy skrypt js musi znajdować się w głowie, a nie na dole strony, aby uniknąć migania wyrażenia {{}} podczas ładowania strony.
s_t_e_v_e
51

Aby poprawić skuteczność podejścia class = 'ng-cloak', gdy skrypty są ładowane na końcu, upewnij się, że w nagłówku dokumentu załadowano następujący css:

.ng-cloak { display:none; }
LOAS
źródło
4
Dodanie! Ważne też nie jest złym pomysłem.
eomeroff
12
Nie visibility: hiddenbyłoby lepiej?
mpen
2
@eomeroff, ale !importantczy hack CSS (zła rzecz) promuje styl do wyboru, prawda? Łamie zasady wyboru CSS.
Kevin Meredith,
5
IMHO to jeden z przypadków!
lex82
3
@ Mark Domyślam się, że „widoczność: ukryty” nadal renderowałoby przestrzeń potrzebną na znaczniki szablonu, podczas gdy „display: none” w ogóle nic nie renderuje. Gdy ukryta jest tylko widoczność, wszelkie elementy zewnętrzne mogą nagle spaść do prawdziwego rozmiaru wewnętrznego, zamiast rosnąć do zera z niczego. Przypuszczam, że to cokolwiek preferuje. :)
James Wilkins
40

Po prostu dodaj maskowanie CSS do nagłówka strony lub jednego z plików CSS:

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

Następnie możesz użyć dyrektywy ngCloak zgodnie z normalną praktyką Angular, i zadziała ona nawet przed załadowaniem samego Angulara .

Właśnie to robi Angular: kod na końcu angular.js dodaje powyższe reguły CSS do nagłówka strony.

Bennett McElwee
źródło
+1 Sam wymyśliłem [ngcloak]selektor, ale jest to bardziej kompletne.
Pierre Henry
1
Świetna odpowiedź! Ładuję Angulara na końcu mojego ciała, więc ngCloak jest niedostępny i nadal miga {{}}. To naprawiło to.
Scottie
21

W swoim css dodaj następujące śledzenie

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

A potem w swoim kodzie możesz dodać dyrektywę ng-cloak. Na przykład,

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

Otóż ​​to!

Nathan Senevirathne
źródło
3

Zgadzam się z odpowiedzią @ pkozlowski.opensource, ale klasa ng-clock nie działała dla mnie w przypadku używania z ng-repeat. dlatego chciałbym polecić użycie klasy dla prostego wyrażenia separatora, takiego jak {{name}} i dyrektywy ngCloak dla ng-repeat.

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

i

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>
Jaison
źródło
Dzięki, że zauważyłeś błąd
Jaison