¿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

  1. ng-class={expression}
  2. normal data binding like{{obj.key}}
  3. ng-hide='mydata==="red"'
angularjs Mohamed Hussain
fuente

Respuestas:

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