Unterschied zwischen ng-bind und Interpolation {{}} in Angular

7

Gibt es einen Unterschied zwischen {{}} und ng-bind in angular.

Ich bin ziemlich neu in Angular. Ich begann mit {{}} und dann in der Dokumentation finde ich ng-bind. Ich denke, sie machen die gleiche Arbeit, aber dann, warum eine Extra-Richtlinie, wenn nicht, dann bitte sagen Sie den Unterschied.

    
Nitin Rawat 09.09.2014, 09:51
quelle

8 Antworten

19

Es gibt einen Hinweis in den offiziellen Dokumenten: Ссылка

  

Normalerweise verwenden Sie ngBind nicht direkt, sondern verwenden stattdessen die   doppelt gelocktes Markup wie {{Ausdruck}}, das ähnlich aber weniger ist   ausführlich.

     

Es ist vorzuziehen, ngBind anstelle von {{expression}} zu verwenden, wenn a   Die Vorlage wird momentan im Rohzustand des Browsers angezeigt   vor Angular kompiliert es. Da ngBind ein Elementattribut ist, ist es   macht die Bindungen für den Benutzer unsichtbar, während die Seite geladen wird.

    
Madhur Ahuja 09.09.2014, 09:53
quelle
7

Der offensichtlichste Unterschied zwischen ihnen ist Flash of Unstyled Inhalt bei der Verwendung von {{ ... }} .

Es gibt jedoch einen subtileren Unterschied zwischen den beiden, wenn das Objekt, das Sie an {{ obj }} und ng-bind="obj" übergeben, keine Zeichenfolge ist.

Aus Zypern :

  

Abhängig davon, ob Sie die Syntax {{ ... }} oder ng-bind verwenden, wird die    .toJSON und die Funktion .toString auf Ihrem Objekt werden aufgerufen   um seine Darstellung zu bestimmen.

    
musically_ut 09.09.2014 09:58
quelle
5

{{}} kann blinken, wenn die Seite geladen wird, ng-bind blendet den Ausdruck aus, bis er korrekt angezeigt wird.

    
Lajos Veres 09.09.2014 09:53
quelle
2

In AngularJs Die ng-bind-Direktive funktioniert als Alternative zur Interpolations-Direktive {{}}. Durch Einfügen eines ng-bind-Attributs in ein HTML-Element können wir AngularJS-Daten in dieses einfügen.

Hier ist ein Beispiel:

%Vor%

Der Hauptunterschied besteht darin, dass das ng-bind-Attribut beim Laden der Seite keinen HTML-Inhalt anzeigt, während die Interpolationsrichtlinie beim Laden der Seite als Flash-Inhalt ohne Stil angezeigt wird.

    
Pavan 24.03.2015 16:59
quelle
2

Zusätzlich zu den oben genannten Antworten

Leistungsprobleme mit der Interpolation:

Wie in diesem Thread besser erklärt,

ng-bind ist eine Direktive und setzt einen Watcher auf die übergebene Variable. Das ng-bind wird nur angewendet, wenn sich der übergebene Wert tatsächlich ändert.

Die Klammern auf der anderen Seite werden in jedem $ digest überprüft und aktualisiert, auch wenn es nicht notwendig ist.

    
hemanth savvana 22.12.2016 17:14
quelle
1

Manchmal, wenn wir unsere Anwendung in den Browser laden, können wir feststellen, dass Inhalt für einige Millisekunden blinkt, bevor {{name}} aufgelöst und Daten geladen werden.

Das passiert, weil die Vorlage geladen wird, bevor AngularJS die Elemente einlesen und kompilieren konnte. Um dieses Problem zu beheben, können Sie die ng-cover-Direktive verwenden.

Im ersten Ansatz (zB {{}}) wertet AngularJS den Ausdruck aus und ersetzt ihn durch einen Wert, der manchmal mit den blinkenden doppelt geschweiften Klammern zurückbleibt, aber ng-bind speichert diese Zeit, indem er AngularJS informiert, den Inhalt von der Ausdruck innerhalb des Elements selbst.

Hinweis: {{}} verursacht manchmal Leistungsprobleme, wenn wir Tausende von Bindungen auf unserer Seite haben. In diesen Szenarien sollten wir mit ng-bind gehen.

    
Kumar Rahul 23.06.2017 11:18
quelle
0

Der Hauptunterschied zwischen ng-bind und {{}} besteht darin, dass ng-bind einen Watcher für die an ihn übergebene Variable erstellt, während geschweifte Klammern ({{}}) den gesamten Ausdruck im Speicher speichern, dh} dirty ausführen - Überprüfung und Aktualisierung des Ausdrucks in jedem Digest-Zyklus, auch wenn dies nicht erforderlich ist.

ng-bind wird nur angewendet, wenn sich der übergebene Wert tatsächlich ändert.

    
Rajat-Systematix 08.03.2017 10:03
quelle
0

Ein weiterer Unterschied ist, wie ng-bind und interpolation die Daten anzeigen. ng-bind ruft die toString() -Methode auf, während interpolation eine benutzerdefinierte "stringify" -Funktion verwendet.

Beispiel

%Vor%


Ausgabe

%Vor%     
Rash 18.11.2017 15:24
quelle

Tags und Links