AngularJS: Warum ist ng-bind in Angular besser als {{}}?

Question

Ich war bei einer der Angular-Präsentationen und eine Person im Meeting erwähnte, dass ng-bind besser ist als die {{}}-Bindung.

Einer der Gründe ist, dass ng-bind die Variable in die Watch-Liste einträgt und nur dann die Daten in die Ansicht übertragen werden, wenn sich das Modell ändert. Auf der anderen Seite interpoliert {{}} den Ausdruck jedes Mal (ich denke, es ist der Angular-Zyklus) und überträgt den Wert, egal ob sich der Wert geändert hat oder nicht.

Es wurde auch gesagt, dass, wenn Sie nicht viele Daten auf dem Bildschirm haben, Sie {{}} verwenden können und das Leistungsproblem nicht sichtbar wird. Kann mir jemand etwas Licht in diese Frage bringen?

Answer 1

Sichtbarkeit:

Während Ihr Angularjs bootet, könnte der Benutzer Ihre platzierten Klammern im HTML sehen. Dies kann mit ng-cloak gehandhabt werden. Aber für mich ist das ein Workaround, den ich nicht verwenden muss, wenn ich ng-bind benutze.

---

Leistung:

Die {{}} sind viel langsamer.

Dieses ng-bind ist eine Directive und wird einen Beobachter auf die übergebene Variable setzen. Deshalb wird das ng-bind nur angewendet, wenn sich der übergebene Wert tatsächlich ändert.

Die Klammern hingegen werden dirty gecheckt und in jedem $digest aktualisiert, auch wenn es nicht notwendig ist.

---

Ich baue derzeit eine große Single-Page-App (~500 Bindungen pro Ansicht). Der Wechsel von {{}} zu strengem ng-bind hat uns etwa 20% in jedem scope.$digest eingespart.

---

Vorschlag:

Wenn Sie ein Übersetzungsmodul wie angular-translate verwenden, bevorzugen Sie immer Directives vor Klammernannotationen.

{{'WELCOME'|translate}} =>

Wenn Sie eine Filterfunktion benötigen, verwenden Sie besser eine Directive, die tatsächlich Ihren benutzerdefinierten Filter verwendet. Dokumentation für $filter-Service

---

UPDATE 28.11.2014 (aber vielleicht vom Thema abweichend):

In Angular 1.3x wurde die bindonce-Funktionalität eingeführt. Daher können Sie den Wert eines Ausdrucks/Attributes einmal binden (wird gebunden, wenn != 'undefined').

Dies ist nützlich, wenn Sie nicht erwarten, dass sich Ihre Bindung ändert.

Verwendung: Platzieren Sie :: vor Ihrer Bindung:

  {{item}}

Beispiel:

ng-repeat, um einige Daten in der Tabelle auszugeben, mit mehreren Bindungen pro Zeile. Übersetzungs-Bindungen, Filterausgaben, die bei jedem Scope-Digest ausgeführt werden.

Answer 2

Wenn Sie kein ng-bind verwenden, stattdessen so etwas wie dies:

  Hallo, {{user.name}}

könnten Sie tatsächlich Hallo, {{user.name}} für eine Sekunde sehen, bevor user.name aufgelöst wird (bevor die Daten geladen werden).

Sie könnten etwas Derartiges tun

  Hallo, 

wenn das ein Problem für Sie ist.

Eine andere Lösung ist die Verwendung von ng-cloak.

Answer 3

ng-bind ist besser als {{...}}

Zum Beispiel könnten Sie folgendes tun:

  Hallo, {{variable}}

Dies bedeutet, dass der gesamte Text Hallo, {{variable}}, der von

umschlossen ist, kopiert und im Speicher gespeichert wird.

Wenn Sie stattdessen etwas wie das hier tun:

  Hallo, 

Wird nur der Wert der Variable im Speicher gespeichert, und Angular wird einen Watcher (eine Beobachterausdruck) registrieren, der nur aus der Variable besteht.

Answer 4

Im Grunde genommen ist die doppelte geschweifte Syntax natürlicher lesbar und erfordert weniger Tipparbeit.

Beide Fälle erzeugen den gleichen Output, aber.. wenn Sie sich für {{}} entscheiden, besteht die Möglichkeit, dass der Benutzer für einige Millisekunden {{}} sieht, bevor Ihr Template von Angular gerendert wird. Wenn Sie also irgendwelche {{}} bemerken, ist es besser, ng-bind zu verwenden.

Auch sehr wichtig ist, dass nur in Ihrer index.html Ihrer Angular-App ungerenderte {{}} sein können. Wenn Sie Direktiven verwenden, also dann auch Templates, besteht keine Möglichkeit, das zu sehen, da Angular zuerst das Template rendert und es dann an den DOM anhängt.

Answer 5

{{...}} steht für bidirektionales Datenbinding. Aber ng-bind ist tatsächlich für einseitiges Datenbinding gedacht.

Durch die Verwendung von ng-bind wird die Anzahl der Watchers auf Ihrer Seite verringert. Daher ist ng-bind schneller als {{...}}. Wenn Sie also nur einen Wert anzeigen und dessen Aktualisierungen möchten, ohne die Änderungen von der Benutzeroberfläche zurück zum Controller zu übertragen, entscheiden Sie sich für ng-bind. Dies erhöht die Leistung der Seite und verkürzt die Ladezeit.

  Hallo,