¿Diferencia entre llaves dobles y simples en JS angular?

192

Soy nuevo en este mundo angular, estoy un poco confundido con el uso de llaves dobles {{}} y llaves simples {} o en ocasiones no se usa llave para incluir la expresión como en las directivas

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

angularjs

— Mohamed Hussain
fuente

279

{{}} - llaves dobles:

{{}} son expresiones angulares y son muy útiles cuando deseas escribir cosas 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>

¡No los uses en un lugar que ya sea una expresión!

Por ejemplo, la directiva ngClicktrata todo lo escrito entre comillas como una expresión:

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

{} - llaves simples:

{}como sabemos representan objetos en JavaScript. Aquí, tampoco, nada diferente:

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

Con algunas directivas como ngClasso ngStyleque aceptan el mapa:

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

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

sin llaves:

Como ya se mencionó, simplemente use corchetes cuando esté dentro de las expresiones. Bastante sencillo:

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

— AlwaysALearner
fuente

2

Podemos usar {{}} con la directiva ng-include, en la propiedad ng-src.

— Jay Shukla

55

Al igual que alguien mencionado en los comentarios, se supone que las llaves dobles {{}} se colocan en la directiva ng-src entre comillas. Pero, ¿por qué ng-src puede hacer eso? ¿Hay un nombre para un tipo especial de directivas que tome {{}} entre comillas?

— ayjay

¿Hay alguna diferencia entre {{foo-bar}} y "{{foo-bar}}"?

— aandis

55

Tuve que investigar un poco más sobre esto para comprenderlo por completo, pero pensé que esta publicación de blog realmente ayudó junto con la respuesta de @ CodeHater: ¿Por qué AngularJS a veces usa llaves simples {}, a veces llaves dobles {{}}, y a veces sin llaves?

— Prancer

2

una cosa más sobre {{}} esto también se usa como Watcher ... evite todo lo posible para un mejor rendimiento

— riyas va
fuente

3

¿Quiso decir que {{}} degrada el rendimiento? ¿Puede proporcionar una fuente para probar eso?

— Don D

1

¿Alguien puede confirmar eso?

— GarfieldKlon el

1

Sé que esta es una publicación antigua y puede estar un poco fuera de tema, pero esto es en respuesta a @DonD y @GafrieldKlon ...

Parecería que un observador se coloca realmente si usara la ng-binddirectiva, no cuando la use {{}}. Dicho esto, creo que la respuesta de @riyas anterior todavía es parcialmente cierta ya que evitar {{}} es generalmente mejor para el rendimiento, pero no por la razón indicada.

Esta respuesta a otra publicación explica esto con más detalle.

— Pleebo
fuente