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?

angularjs

— JeremyWeir
źródło

6

Może to pomóc: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls

— Ismael

Powyższe było właściwym rozwiązaniem

— Edmund Rojas

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ć 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: ładowanie ... . 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. ładowanie ...

— 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

6

Możesz także użyć ng-attr-src="{{variable}}"zamiast, src="{{variable}}"a atrybut zostanie wygenerowany dopiero po skompilowaniu szablonów przez kompilator. Zostało to wspomniane tutaj w dokumentacji: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

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