Differenza tra parentesi graffa doppia e singola in JS angolare?

192

Sono nuovo in questo mondo angolare, sono un po 'confuso con l'uso di parentesi graffe doppie {{}} e parentesi graffe singole {} o a volte nessuna parentesi graffa viene utilizzata per includere l'espressione come nelle direttive

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

angularjs

— Mohamed Hussain
fonte

279

{{}} - doppie parentesi graffe:

{{}} sono espressioni angolari e sono molto utili quando si desidera scrivere cose in HTML:

<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>

Non usarli in un posto che è già un'espressione!

Ad esempio, la direttiva ngClicktratta qualsiasi cosa scritta tra virgolette come un'espressione:

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

{} - singole parentesi graffe:

{}come sappiamo stare per oggetti in JavaScript. Anche qui niente di diverso:

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

Con alcune direttive simili ngClasso ngStyleche accettano la mappa:

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

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

senza parentesi graffe:

Come già accennato, diventa semplicemente privo di bretelle quando all'interno delle espressioni. Abbastanza semplice:

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

— AlwaysALearner
fonte

2

Possiamo usare {{}} con la direttiva ng-include, nella proprietà ng-src.

— Jay Shukla,

5

Come qualcuno menzionato nei commenti, le parentesi graffe doppie {{}} dovrebbero essere inserite nella direttiva ng-src tra virgolette. Ma perché ng-src è in grado di farlo? Esiste un nome per un tipo speciale di direttive che contiene {{}} tra virgolette?

— ajjay,

C'è qualche differenza tra {{foo-bar}} e "{{foo-bar}}"?

— aandis,

5

Ho dovuto fare un po 'più di ricerca su questo me stesso per comprenderlo appieno, ma ho pensato che questo post sul blog mi ha davvero aiutato insieme alla risposta di @ CodeHater, Perché AngularJS a volte usa parentesi graffe {}, a volte doppie parentesi {{}}, e a volte nessuna parentesi graffa?

— Prancer

2

un'altra cosa {{}} viene usata anche come Watcher .. per favore, evita il più possibile per prestazioni migliori

— riyas va
fonte

3

Intendi {{}} peggiorare le prestazioni? Potete per favore fornire una fonte per dimostrarlo?

— Don D

1

Qualcuno può confermarlo?

— GarfieldKlon,

1

So che questo è un vecchio post e potrebbe essere un po 'fuori tema, ma questo è in risposta a @DonD e @GafrieldKlon ...

Sembrerebbe che un osservatore sia effettivamente posizionato se dovessi usare la ng-binddirettiva, non quando lo usi {{}}. Detto questo, credo che la risposta di @riyas sopra sia ancora parzialmente vera in quanto evitare {{}} è generalmente migliore per le prestazioni, ma non per il motivo indicato.

Questa risposta a un altro post lo spiega in modo più dettagliato.

— Pleebo
fonte