双花括号和单花括号在角形JS中的区别？

我对这个棱角分明的世界很陌生，我对双花括号{{}}的使用有点困惑。 和单花括号{}或有时不使用花括号来包含指令中的表达式like.

  1. ng-class={expression}
  2. normal data binding like{{obj.key}}
  3. ng-hide='mydata==="red"'
109123 次浏览
小开
最佳答案

\{\{}}-双花括号：

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

小开
关于\{\{}}的

另一件事 它也被用作守望者。 请尽量避免，以获得更好的性能

小开

我知道这是一个旧的帖子，可能有点偏离主题，但这是对@Dond和@Gafrieldklon的回应。

如果您使用ng-bind指令，__使用\{\{}}时的ABC3指令，则似乎实际上放置了一个监视器。话虽如此，我相信@Riya的上述回答仍然部分正确，因为回避\{\{}}通常较好的的性能，但不是因为所述的原因。

另一篇文章的这个答案更详细地解释了这一点。


提交答案