Różnica między wiązaniem ng a interpolacją {{}} w kątowym

Question

Czy istnieje różnica między {{}} a ng-bind w kątowym.

Jestem całkiem nowy w Angular. Zacząłem od używania {{}}, a następnie w dokumentacji znalazłem ng-bind. Wydaje mi się, że wykonują tę samą pracę, ale dlaczego dodatkowa dyrektywa, jeśli nie, to powiedz różnicę.

Answer 1

Istnieje pewna wskazówka w oficjalnych dokumentów: https://docs.angularjs.org/api/ng/directive/ngBind

Zazwyczaj nie korzystać bezpośrednio ngBind, ale zamiast użyć podwójne kręcone znaczników jak {{wyrażenie}}, który jest podobny, ale mniej verbose.

Zaleca się użycie ngBind zamiast {{expression}}, jeśli szablon jest chwilowo wyświetlany przez przeglądarkę w stanie surowym , zanim Angular ją skompiluje. Ponieważ ngBind jest atrybutem elementu, to powoduje, że wiązania są niewidoczne dla użytkownika podczas ładowania strony.

Answer 2

{{}} może migać podczas ładowania strony, ng-bind poprawnie ukrywa wyrażenie, dopóki nie zostanie wyświetlone poprawnie.

Answer 3

Najbardziej oczywistą różnicą między nimi jest Flash of Unstyled content podczas korzystania z {{ ... }}.

Jednak jest bardziej subtelna różnica między nimi, jeśli obiekt przekazać do {{ obj }} i ng-bind="obj" jest nie ciąg.

Od https://stackoverflow.com/a/19744728/987185:

W zależności od tego, czy używasz {{ ... }} lub ng-bind składni The .toJSON a funkcja .toString na obiekt będzie nosił nazwę celu określenia jego reprezentacji.

Answer 4

W AngularJs ng-bind dyrektywa działa jako alternatywa dla dyrektywy interpolacji {{}}. Poprzez wstawienie atrybutu ng-bind do elementu HTML możemy wstawić do niego dane AngularJS.

Oto przykład:

<div ng-controller="DemoController" > 
    <span ng-bind="demoData.doThis()"></span> 
</div> 

Kluczową różnicą jest NG-wiążą przypisują przyzwyczajenie pokazać zawartość HTML na stronie załadunku, gdzie jako dyrektywa interpolacji pokazują jak błysk treści bez stylu podczas ładowania strony.

Answer 5

Oprócz wyżej wymienionych odpowiedzi,

problemy z wydajnością z interpolacją:

Jak wyjaśniono w this wątek lepiej

ng-bind jest dyrektywa i umieści obserwatora na zmienną minął. Tak więc ng-bind będzie mieć zastosowanie tylko wtedy, gdy przekazana wartość rzeczywiście się zmieni.

Klamry z drugiej strony będą brudne sprawdzane i odświeżane w każdym streszczeniu $, nawet jeśli nie jest to konieczne.

Answer 6

Główną różnicą między ng-bind a {{}} jest to, że ng-bind tworzy watcher dla zmiennej przekazanej do niego, podczas gdy nawiasy klamrowe ({{}}) będą (przechowują całe wyrażenie w pamięci tj.} Wykonują brudny kontroli oraz odświeżenie wyraz w każdym strawić cyklu, nawet jeśli nie jest to konieczne.

ng-wiążą będzie miała zastosowanie tylko wtedy, gdy wartość przekazana zmienia rzeczywistości.

Answer 7

Czasami kiedy załadować naszą aplikację w przeglądarce, możemy zauważyć migającą zawartość przez kilka milisekund zanim rozwiązanie {{name}} zostanie rozwiązane i dane zostaną załadowane.

To h appens ponieważ szablon został wczytany zanim AngularJS miał szansę wejść i skompilować elementy. Aby rozwiązać ten problem, możesz użyć dyrektywy ng-cloak.

W pierwszym podejściu (tj. {{}}) AngularJS ocenia wyrażenie, a następnie zastępuje je pewną wartością, która kiedyś pozostała z migającymi podwójnymi nawiasami klamrowymi, ale ng-bind zapisuje ten czas, informując AngularJS o umieszczeniu zawartości wyrażenia w samym elemencie.

Uwaga: {{}} czasami powoduje problemy z wydajnością, jeśli mamy tysiące wiązań na naszej stronie. W tym scenariuszu powinniśmy pójść z ng-bind.

Answer 8

Kolejna różnica polega na wyświetlaniu danych przez ng-bind i . ng-bind wywołuje metodę toString(), natomiast interpolation używa niestandardowej funkcji "stringify".

Przykład

<div ng-controller="showClockCtrl"> 
    <p>The current time is {{currentDateTime}}.</p> 
    <p>The current time is <span ng-bind="currentDateTime"></span>.</p> 
</div> 

<div ng-controller="showClockCtrl"> 
    <p>MyObject is {{myObject}}</p> 
    <p>MyObject is <span ng-bind="myObject"></span></p> 
</div> 

<script> 
var showClockCtrl = function ($scope) { 
    $scope.currentDateTime = new Date(); 
    $scope.myObject = { 
     'key1': 'value1', 
     'key2': 'value2', 
     'key3': 'value3' 
    } 
}; 
</script> 

Wyjście

The current time is "2017-11-18T15:09:59.429Z". 

The current time is Sat Nov 18 2017 10:09:59 GMT-0500 (EST). 

MyObject is {"key1":"value1","key2":"value2","key3":"value3"} 

MyObject is [object Object]