Byłem w jednej z kątowych prezentacji, a jedna z osób na wspomnianym spotkaniu ng-bind
jest lepsza niż {{}}
wiążąca.
Jednym z powodów jest ng-bind
umieszczenie zmiennej na liście obserwacyjnej i tylko w przypadku zmiany modelu dane są wypychane do widoku, z drugiej strony {{}}
interpolują wyrażenie za każdym razem (myślę, że to cykl kątowy) i przesuwają wartość, nawet jeśli wartość się zmieniła lub nie.
Mówi się również, że jeśli nie masz dużo danych na ekranie, możesz użyć, {{}}
a problem z wydajnością nie będzie widoczny. Czy ktoś może mi rzucić nieco światła na ten problem?
javascript
angularjs
ng-bind
Nair
źródło
źródło
ngBind
zamiast,{{ expression }}
jeśli przeglądarka chwilowo wyświetli szablon w stanie surowym, zanim Angular go skompiluje. PonieważngBind
jest to atrybut elementu, sprawia, że powiązania są niewidoczne dla użytkownika podczas ładowania strony”. - ale nic nie wspomniano o wydajności.Odpowiedzi:
Jeśli nie używasz
ng-bind
, zamiast tego coś takiego:może być wyświetlany rzeczywisty
Hello, {{user.name}}
przez sekundę, zanimuser.name
zostanie rozwiązany (przed załadowaniem danych)Możesz zrobić coś takiego
jeśli to dla ciebie problem.
Innym rozwiązaniem jest użycie
ng-cloak
.źródło
ng-cloak
został wynaleziony, aby naprawić ten problem.ng-bind-template
którym można połączyć oba podejścia:ng-bind-template="Hello, {{user.name}}"
tutaj wiązanie nadal zapewnia wzrost wydajności i nie wprowadza żadnego dalszego zagnieżdżaniaWidoczność:
Podczas gdy twój angularjs ładuje się, użytkownik może zobaczyć umieszczone w nawiasach klamrowych html. Można to rozwiązać za pomocą
ng-cloak
. Ale dla mnie jest to obejście, którego nie muszę używać, jeśli używamng-bind
.Wydajność:
{{}}
Jest znacznie wolniejszy .Jest
ng-bind
to dyrektywa i spowoduje umieszczenie obserwatora na przekazywanej zmiennej. Więcng-bind
będzie miała zastosowanie tylko, gdy przeszedł wartość ma faktycznie zmienić .Z drugiej strony wsporniki będą sprawdzane i odświeżane w każdym
$digest
, nawet jeśli nie jest to konieczne .Obecnie tworzę dużą aplikację na jednej stronie (~ 500 powiązań na wyświetlenie). Zmiana z {{}} na ścisłą
ng-bind
pozwoliła nam zaoszczędzić około 20% na każdymscope.$digest
.Sugestia :
Jeśli korzystasz z modułu tłumaczenia, takiego jak tłumaczenie kątowe , zawsze preferuj dyrektywy przed opisami w nawiasach.
{{'WELCOME'|translate}}
=><span ng-translate="WELCOME"></span>
Jeśli potrzebujesz funkcji filtrowania, lepiej skorzystaj z dyrektywy, która faktycznie korzysta z niestandardowego filtra. Dokumentacja usługi $ filter
AKTUALIZACJA 28.11.2014 (ale może nie na temat):
W Angular 1.3x wprowadzono
bindonce
funkcjonalność. Dlatego możesz raz powiązać wartość wyrażenia / atrybutu (zostanie powiązana, gdy! = 'Undefined').Jest to przydatne, gdy nie oczekuje się zmiany wiązania.
Użycie: Umieść
::
przed oprawą:Przykład:
ng-repeat
aby wyświetlić niektóre dane w tabeli, z wieloma powiązaniami na wiersz. Powiązania translacji, wyniki filtrów, które są wykonywane w każdym skrócie zakresu.źródło
ng-bind
jest lepszy niż{{...}}
Na przykład możesz wykonać:
Oznacza to, że cały
Hello, {{variable}}
załączony tekst<div>
zostanie skopiowany i zapisany w pamięci.Jeśli zamiast tego zrobisz coś takiego:
Tylko wartość wartości zostanie zachowana w pamięci, a kątowy zarejestruje obserwatora (wyrażenie zegarka), który składa się tylko ze zmiennej.
źródło
<div ng-bind-template="{{ var1 }}, {{ var2}}"></div>
jest alternatywą dla {{}} i działa jak ng-bindng-bind
byłby bardziej porównywalny do<div>Hello, <span>{{variable}}</span></div>
.Zasadniczo podwójna składnia jest bardziej naturalnie czytelna i wymaga mniej pisania.
Oba przypadki dają takie same dane wyjściowe, ale .. jeśli wybierzesz opcję,
{{}}
istnieje szansa, że użytkownik zobaczy kilka milisekund,{{}}
zanim szablon zostanie wyrenderowany przez kąt. Więc jeśli zauważysz,{{}}
to lepiej jest użyćng-bind
.Bardzo ważne jest również to, że tylko w pliku index.html aplikacji kątowej możesz nie renderować
{{}}
. Jeśli używasz dyrektyw, a następnie szablonów, nie ma szans, aby to zobaczyć, ponieważ kątowy najpierw renderuje szablon, a następnie dołącza go do DOM.źródło
{{...}}
oznacza dwukierunkowe wiązanie danych. Ale ng-bind jest w rzeczywistości przeznaczony do jednokierunkowego wiązania danych.Użycie ng-bind zmniejszy liczbę obserwatorów na twojej stronie. Stąd ng-bind będzie szybszy niż
{{...}}
. Tak więc, jeśli chcesz tylko wyświetlić wartość i jej aktualizacje, a nie chcesz odzwierciedlać jej zmiany z interfejsu użytkownika z powrotem do kontrolera, przejdź do ng-bind . Zwiększy to wydajność strony i skróci czas ładowania strony.źródło
Jest tak, ponieważ
{{}}
w kompilatorze kątowym uwzględnia się zarówno węzeł tekstowy, jak i jego element nadrzędny, ponieważ istnieje możliwość scalenia 2{{}}
węzłów. Dlatego istnieją dodatkowe linkery, które wydłużają czas ładowania. Oczywiście dla kilku takich przypadków różnica jest nieistotna, jednak gdy używasz tego w repeaterze dużej liczby elementów, spowoduje to wpływ na wolniejsze środowisko wykonawcze.źródło
Powód, dla którego Ng-Bind jest lepszy, ponieważ,
Kiedy Twoja strona nie jest ładowana, gdy twój internet jest wolny lub gdy twoja strona jest w połowie ładowana, możesz zobaczyć, że tego rodzaju problemy (sprawdź zrzut ekranu ze znakiem odczytu) zostaną uruchomione na ekranie, który jest całkowicie dziwny. Aby tego uniknąć, powinniśmy użyć Ng-bind
źródło
ng-bind ma również swoje problemy. Kiedy próbujesz użyć filtrów kątowych , limitu lub czegoś innego, możesz mieć problem, jeśli użyjesz ng-bind . Ale w innym przypadku ng-bind jest lepszy po stronie UX. Kiedy użytkownik otworzy stronę, zobaczy (10ms-100ms), że drukuje symbole ( {{...}} ), dlatego ng-bind jest lepszy .
źródło
W {{}} występuje pewien problem z migotaniem, np. Kiedy odświeżasz stronę, wtedy przez krótki czas widoczny jest wyraz wyrażenia czasu, więc do przedstawienia danych powinniśmy użyć ng-bind zamiast wyrażenia.
źródło
ng-bind
jest również bezpieczniejszy, ponieważ reprezentujehtml
jako ciąg.Na przykład
'<script on*=maliciousCode()></script>'
będzie wyświetlany jako ciąg i nie zostanie wykonany.źródło
Według Angular Doc:
Ponieważ ngBind jest atrybutem elementu, sprawia, że powiązania są niewidoczne dla użytkownika podczas ładowania strony ... to główna różnica ...
Zasadniczo dopóki wszystkie elementy dom nie zostaną załadowane, nie możemy ich zobaczyć, a ponieważ ngBind jest atrybutem elementu, czeka, aż domeny wejdą do gry ... więcej informacji poniżej
ngBind
- dyrektywa w module ng
The atrybut ngBind mówi angularjs zastąpić zawartość tekstową określonego elementu HTML z wartością danego wyrazu, a także aktualizować zawartość tekstową, gdy wartość, że zmiany ekspresji.
Zazwyczaj nie używasz ngBind bezpośrednio , ale zamiast tego używasz podwójnego, kręconego znacznika, takiego jak {{wyrażenie}}, który jest podobny, ale mniej szczegółowy.
Preferowane jest użycie ngBind zamiast {{wyrażenie}}, jeśli przeglądarka chwilowo wyświetla szablon w stanie surowym, zanim AngularJS go skompiluje. Ponieważ ngBind jest atrybutem elementu, sprawia, że powiązania są niewidoczne dla użytkownika podczas ładowania strony.
Alternatywnym rozwiązaniem tego problemu byłoby pomocą ngCloak dyrektywy. odwiedź tutaj
Aby uzyskać więcej informacji na temat ngbind odwiedź tę stronę: https://docs.angularjs.org/api/ng/directive/ngBind
Możesz zrobić coś takiego jako atrybut, ng-bind :
lub wykonaj interpolację jak poniżej:
lub w ten sposób z atrybutami ng-cloak w AngularJs:
ng-cloak unikaj flashowania na domku i poczekaj, aż wszystko będzie gotowe! jest to równe atrybutowi ng-bind ...
źródło
Możesz odnieść się do tej witryny, która wyjaśni, która z nich jest lepsza, ponieważ wiem {{}}, że jest wolniejsza niż ng-bind.
http://corpus.hubwiz.com/2/angularjs/16125872.html Poleć tę stronę.
źródło