angularJS的双和单个花括号之间的区别？

我对这个angular度世界是陌生的，我对使用双花括号{{}}和单花括号{}或有时没有使用花括号来包括expression式中的expression式有点困惑

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

Answer 1

{{}} – 双花括号：

{{}}是有angular度的expression式，当你希望把东西写入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> 

不要在已经是expression的地方使用这些东西！

例如， ngClick指令将引号之间的任何内容作为expression式处理：

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

{} – 单个大括号：

{}如我们所知，代表JavaScript中的对象。 这里也没什么不同：

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

用像ngClass或ngStyle这样的接受map的指令：

 <span ng-style="{'color' : 'red'}">{{viruses.length}} viruses found!</span> <div ng-class="{'green' : vegetable == 'lettuce', 'red' : vegetable == 'tomato'}">.. 

没有大括号：

正如已经提到的，只是在内部expression式的时候没有使用。 非常简单：

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

Answer 2

关于“{{}}”还有一件事，它也被用作Watcher ..请尽可能避免更好的性能