angularjs - Angular JS 中双花括号和单花括号的区别？

Question

我是这个有 Angular 的世界的新手，我对双花括号 {{}} 的使用有点困惑和单花括号{}或有时不使用花括号来包含指令中的表达式

1. ng-class={表达式}
2. 普通数据绑定(bind)，例如{{obj.key}}
3. ng-hide='mydata==="red"'

Answer 1

{{}} - 双花括号:

{{}} 是 Angular 表达式，当您希望将内容写入 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>

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

例如，指令 ngClick 将引号之间写入的任何内容视为表达式:

<!-- 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}">

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

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

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

没有花括号:

正如已经提到的，在表达式内部时不要使用大括号。很简单:

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