Wenn doppelte Klammern verwenden {{}} in AngularJS

Question

aus der Angular-Dokumentation entnommen:

Angular Expressions
Angular Ausdrücke sind JavaScript-ähnlicher Code-Schnipsel, die hauptsächlich platziert in Interpolation Bindungen sind wie

<span title="{{ attrBinding> }}">{{ textBinding }}</span> 

, sondern auch direkt in der Richtlinie Attribute wieverwendet.

Zum Beispiel sind diese gültige Ausdrücke in Eckig:

1 + 2 a + b user.name Artikel [index]

Jedoch habe ich ein wenig verwirrt bin, wann die verwenden Doppelstreben Syntax {{}} und wenn nicht zu. Die Dokumentation scheint darauf hinzuweisen, dass Sie sie nicht benötigen, wenn Sie Ausdrücke innerhalb der Direktivitätsattribute verwenden (siehe oben das ng-click-Beispiel).

Obwohl der folgende Code, der im Gegenteil bietet anekdotische Evidenz funktioniert:

<ul id="Menu"> 
     <li ng-repeat="appModule in applicationModules" id="{{appModule.Name}}" ng-class="{ 'selected' : selectedAppModule == '{{appModule.Name}}' }" ng-click="menuClicked(appModule.Name)"> 
      <a href="#Content/{{appModule.Name}}">{{appModule.Display}}</a> 
     </li> 
    </ul> 

Beachten Sie, wie in der ng-Klasse-Richtlinie werden die Doppelstreben verwendet und innerhalb der ng-Click-Richtlinie sind sie nicht.

Woher wissen Sie wann und wann nicht?

Answer 1

Es hängt von dem fraglichen Direktivitätsattribut und dem Typ der Bindung ab, die es verwendet. Weiter hängt es davon ab, was Sie in der gegebenen Situation vorhaben.

Von Ihrem Beispiel:

ng-repeat="appModule in applicationModules" 

Keine Notwendigkeit für die Klammern wie dieser Ausdruck von Winkeln innerhalb der ng-Repeat-Richtlinie bewertet wird.

---

id="{{appModule.Name}}" 

Hier brauchen wir Klammern, wie wir die ID gleich dem Wert des Ausdrucks wollen.

---

ng-class="{ 'selected' : selectedAppModule == '{{appModule.Name}}' }" 

Ich bin mir ziemlich sicher, dass dies wie folgt geschrieben werden kann:

ng-class="{ 'selected' : selectedAppModule == appModule.Name }" 

Und Sie das gleiche Verhalten zu bekommen.

---

ng-click="menuClicked(appModule.Name)" 

In diesem Beispiel müssen wir die ng-Klick auf die Methode mit dem Namen menuClicked gebunden zu sein.

---

Im Allgemeinen verwenden wir {{}}, wenn wir wollen, um den Ausdruck auszuwerten und, wenn sie mit Attributen haben wir es müssen nicht immer verwenden {{}}, da sie in vielen Fällen hinter den Kulissen ausgewertet.

Einfache Tipp Eine Faustregel für, wenn {{}} benötigt wird, ist es als Wrapper für eine .ToString() -Methode zu denken. Ist es sinnvoll, den Ausdruck in einen String umzuwandeln, dann wird {{}} verwendet. (Alle Zähler Beispiele sind sehr willkommen)