Diferença entre chaves duplas e simples em JS angular?

192

Sou novo neste mundo angular, estou um pouco confuso com o uso de chaves duplas {{}} e chaves simples {} ou, às vezes, nenhuma chave é usada para incluir a expressão como nas diretivas

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

Respostas:

279

{{}} - chaves duplas:

{{}} são expressões angulares e são bastante úteis quando você deseja escrever coisas para 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>

Não os use em um local que já seja uma expressão!

Por exemplo, a diretiva ngClicktrata qualquer coisa escrita entre as aspas como uma expressão:

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

{} - chaves simples:

{}como sabemos, representam objetos em JavaScript. Aqui também nada de diferente:

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

Com algumas diretivas como ngClassou ngStyleque aceitam mapa:

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

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

sem chaves:

Como já mencionado, basta ficar sem pulseira quando estiver dentro de expressões. Bem simples:

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

 

AlwaysALearner
fonte
2
Podemos usar {{}} com a diretiva ng-include, na propriedade ng-src.
Jay Shukla
5
Como alguém mencionado nos comentários, o colchete duplo {{}} deve ser colocado na diretiva ng-src entre aspas. Mas por que o ng-src é capaz de fazer isso? Existe um nome para o tipo especial de diretivas que leva {{}} entre aspas?
ayjay
Existe alguma diferença entre {{foo-bar}} e "{{foo-bar}}"?
Aandis
5
Eu mesmo tive que fazer uma pesquisa um pouco mais para entender completamente, mas achei que essa postagem do blog realmente ajudou junto com a resposta do @ CodeHater: Por que o AngularJS às vezes usa chaves simples {}, outras vezes chaves {{}} e às vezes sem aparelho?
Prancer
2

mais uma coisa sobre {{}} ela também é usada como observador. evite o máximo possível para obter um melhor desempenho

riyas va
fonte
3
Você quis dizer {{}} prejudica o desempenho? Você pode fornecer uma fonte para provar isso?
Don D
1
Alguém pode confirmar isso?
GarfieldKlon
1

Eu sei que este é um post antigo e pode ser um pouco fora de tópico, mas isso é uma resposta a @DonD e @GafrieldKlon ...

Parece que um observador é realmente colocado se você usar a ng-binddiretiva, não quando estiver usando {{}}. Dito isto, acredito que a resposta do @riyas acima ainda é parcialmente verdadeira, pois evitar {{}} é geralmente melhor para o desempenho, mas não pelo motivo indicado.

Esta resposta para outra postagem explica isso com mais detalhes.

Pleebo
fonte