Unterschied zwischen doppelter und einfacher geschweifter Klammer im eckigen JS?

192

Ich bin neu in dieser eckigen Welt, ich bin etwas verwirrt mit der Verwendung von doppelten geschweiften Klammern {{}} und einfachen geschweiften Klammern {} oder manchmal wird keine geschweifte Klammer verwendet, um den Ausdruck wie in den Anweisungen aufzunehmen

ng-class={expression}
normal data binding like{{obj.key}}
ng-hide='mydata==="red"'

angularjs

— Mohamed Hussain
quelle

279

{{}} - doppelte geschweifte Klammern:

{{}} sind Winkelausdrücke und sehr praktisch, wenn Sie Inhalte in HTML schreiben möchten:

<div>
    {{planet.name == "Earth" ? "Yeah! We 're home!" : "Eh! Where 're we?"}}
</div>

<!-- with some directives like `ngSrc` -->
<img ng-src="http://www.example.com/gallery/{{hash}}"/>

<!-- set the title attribute -->
<div ng-attr-title="{{celebrity.name}}">...

<!-- set a custom attribute for your custom directive -->
<div custom-directive custom-attr="{{pizza.size}}"></div>

Verwenden Sie diese nicht an einem Ort, der bereits ein Ausdruck ist!

Zum Beispiel ngClickbehandelt die Direktive alles, was zwischen den Anführungszeichen steht, als Ausdruck:

<!-- so dont do this! -->
<!-- <button ng-click="activate({{item}})">... -->

{} - einzelne geschweifte Klammern:

{}wie wir wissen stehen für Objekte in JavaScript. Auch hier nichts anderes:

<div ng-init="distanceWalked = {mon:2, tue:2.5, wed:0.8, thu:3, fri:1.5, 
sat:2, sun:3}">

Mit einigen Anweisungen wie ngClassoder ngStyledie Karte akzeptieren:

<span ng-style="{'color' : 'red'}">{{viruses.length}} viruses found!</span>

<div ng-class="{'green' : vegetable == 'lettuce', 
'red' : vegetable == 'tomato'}">..

keine geschweiften Klammern:

Wie bereits erwähnt, gehen Sie einfach innerhalb von Ausdrücken spannungsfrei. Ziemlich einfach:

<div ng-if="zoo.enclosure.inmatesCount == 0">
    Alarm! All the monkeys have escaped!
</div>

— AlwaysALearner
quelle

2

Wir können {{}} mit der Anweisung ng-include in der Eigenschaft ng-src verwenden.

— Jay Shukla

5

Wie in den Kommentaren erwähnt, sollten doppelte Klammern {{}} zwischen Anführungszeichen in die ng-src-Direktive eingefügt werden. Aber warum kann ng-src das? Gibt es einen Namen für spezielle Anweisungen, die {{}} in Anführungszeichen setzen?

— Ayjay

Gibt es einen Unterschied zwischen {{foo-bar}} und "{{foo-bar}}"?

— Aandis

5

Ich musste selbst etwas mehr darüber recherchieren, um es vollständig zu verstehen, aber ich dachte, dieser Blog-Beitrag half wirklich zusammen mit der Antwort von @ CodeHater: Warum verwendet AngularJS manchmal einfache Klammern {}, manchmal doppelte Klammern {{}} und manchmal keine Zahnspange?

— Prancer

2

Eine weitere Sache {{}} wird auch als Watcher verwendet. Bitte vermeiden Sie so viel wie möglich, um eine bessere Leistung zu erzielen

— riyas va
quelle

3

Meinten Sie, {{}} verschlechtert die Leistung? Können Sie bitte eine Quelle angeben, um dies zu beweisen?

— Don D

1

Kann jemand das bestätigen?

— GarfieldKlon

1

Ich weiß, dass dies ein alter Beitrag ist und möglicherweise etwas vom Thema abweicht, aber dies ist eine Antwort auf @DonD und @GafrieldKlon ...

Es scheint, dass ein Beobachter tatsächlich platziert ist, wenn Sie die ng-bindDirektive verwenden, nicht wenn Sie sie verwenden {{}}. Davon abgesehen glaube ich, dass die Antwort von @riyas in dieser Vermeidung teilweise noch wahr ist {{}} im Allgemeinen für die Leistung besser ist , aber nicht aus dem angegebenen Grund.

Diese Antwort auf einen anderen Beitrag erklärt dies ausführlicher.

— Pleebo
quelle