Différence entre accolade double et simple dans JS angulaire?

192

Je suis nouveau dans ce monde angulaire, je suis un peu confus avec l'utilisation des doubles accolades {{}} et des accolades simples {} ou parfois aucune accolade n'est utilisée pour inclure l'expression comme dans les directives

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

angularjs

— Mohamed Hussain
source

279

{{}} - doubles accolades:

{{}} sont des expressions angulaires et sont très utiles lorsque vous souhaitez écrire des éléments en 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>

Ne les utilisez pas dans un endroit qui est déjà une expression!

Par exemple, la directive ngClicktraite tout ce qui est écrit entre les guillemets comme une expression:

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

{} - accolades simples:

{}comme nous le savons, représentent des objets en JavaScript. Ici aussi, rien de différent:

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

Avec certaines directives comme ngClassou ngStylequi acceptent la carte:

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

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

pas d'accolades:

Comme déjà mentionné, allez simplement sans bretelles dans les expressions. Assez facile:

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

— AlwaysALearner
source

2

Nous pouvons utiliser {{}} avec la directive ng-include, dans la propriété ng-src.

— Jay Shukla

5

Comme quelqu'un mentionné dans les commentaires, les doubles accolades {{}} sont censées être placées dans la directive ng-src entre guillemets. Mais pourquoi ng-src est-il capable de faire cela? Existe-t-il un nom pour un type spécial de directives qui prend {{}} entre guillemets?

— ayjay

Y a-t-il une différence entre {{foo-bar}} et "{{foo-bar}}"?

— aandis

5

J'ai dû faire un peu plus de recherches à ce sujet moi-même pour bien le comprendre, mais je pensais que cet article de blog avait vraiment aidé avec la réponse de @ CodeHater, Pourquoi AngularJS utilise-t-il parfois des accolades simples {}, parfois des doubles accolades {{}}, et parfois pas d'accolades?

— Prancer

2

une dernière chose à {{}} ce sujet est également utilisée comme Watcher .. veuillez éviter autant que possible pour de meilleures performances

— riyas va
source

3

Vouliez-vous dire que {{}} dégrade les performances? Pouvez-vous s'il vous plaît fournir une source pour le prouver?

— Don D

1

Quelqu'un peut-il le confirmer?

— GarfieldKlon

1

Je sais que c'est un ancien article et que cela pourrait être un peu hors sujet, mais c'est en réponse à @DonD et @GafrieldKlon ...

Il semblerait qu'un observateur soit réellement placé si vous utilisiez la ng-binddirective, pas lors de l'utilisation {{}}. Cela étant dit, je pense que la réponse de @riyas ci-dessus est encore partiellement vraie en ce sens qu'éviter {{}} est généralement meilleur pour les performances, mais pas pour la raison indiquée.

Cette réponse à un autre article explique cela plus en détail.

— Pleebo
source