角JS中双花括号和单花括号的区别?

I am new to this angular world, i am bit confused with the use of double curly braces {{}} and single curly braces{} or sometime no curly brace is used to include the expression like in the directives

我对这个有棱角的世界很陌生，我对使用双花括号{}和单花括号{}有点困惑，有时也不像在指令中那样使用花括号来包含表达式

1. ng-class={expression}
2. ng-class = { }表达式
3. normal data binding like{{obj.key}}
4. 正常的数据绑定象{ { obj.key } }
5. ng-hide='mydata==="red"'
6. ng-hide = ' mydata = = =“红色”

2 个解决方案

#1

{{}} - double curly braces:

{{}} are Angular expressions and come quite handy when you wish to write stuff to HTML:

{{}是角表达式，当你想要把东西写进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>

Don't use these at a place that is already an expression!

不要在已经有表达的地方使用它们!

For instance, the directive ngClick treats anything written in between the quotes as an expression:

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

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

{} - single curly braces:

{} as we know stand for objects in JavaScript. Here, too, nothing different:

我们知道{}在JavaScript中表示对象。这里也没有什么不同:

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

With some directives like ngClass or ngStyle that accept map:

使用一些指令，如ngClass或接受map的ngStyle:

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

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

no curly braces:

As already mentioned just go bracketless when inside expressions. Quite simple:

正如前面所提到的，在表达式内部时只需去无括号即可。很简单:

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

#2

one more thing about {{}} it is also used as Watcher.. please avoid as much as possible for better performance

关于{}，还有一件事也被用作监视者。为了更好的表现，请尽量避免