196

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

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

3 回答 3

288

{{}} - 双花括号：

{{}}是 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}">

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>

 

于 2013-07-26T10:29:51.763 回答
2

我知道这是一篇旧帖子，可能有点离题，但这是对@DonD 和@GafrieldKlon 的回应......

如果您要使用该ng-bind指令，而不是在使用{{}}. 话虽如此，我相信@riyas 上面的回答仍然部分正确，因为避免 {{}}通常对性能更好，但不是出于所述原因。

This answer to another post更详细地解释了这一点。

于 2019-10-31T22:40:17.403 回答
1

关于它的另一件事{{}} 也用作观察者..请尽可能避免以获得更好的性能

于 2017-01-04T06:46:57.063 回答