角度JS中双花括号和单花括号的区别？答案

【问题标题】：Difference between double and single curly brace in angular JS?角度JS中双花括号和单花括号的区别？
【发布时间】：2013-07-26 13:24:24
【问题描述】：

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

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

【问题讨论】：

标签： angularjs

【解决方案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}">

使用一些像 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>

【讨论】：

我们可以在 ng-src 属性中使用 {{}} 和 ng-include 指令。
就像有人在 cmets 中提到的那样，双括号 {{}} 应该放在 ng-src 指令中的引号之间。但是为什么 ng-src 能够做到这一点呢？是否有特殊类型指令的名称，将 {{}} 包含在引号内？
{{foo-bar}}和“{{foo-bar}}”有什么区别吗？
我必须自己对此进行更多研究才能完全理解它，但我认为这篇博文对@CodeHater 的回答很有帮助，Why does AngularJS sometimes use single braces { }, sometimes double braces {{ }}, and sometimes no braces?

【解决方案2】：

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

如果您要使用ng-bind 指令，似乎实际上放置了一个观察者，而在使用{{}} 时，不是。话虽如此，我相信上述@riyas 的回答仍然部分正确，因为避免 {{}} 通常更好的性能，但不是出于所述原因。

This answer 到另一篇文章更详细地解释了这一点。

【讨论】：

【解决方案3】：

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

【讨论】：

您的意思是 {{}} 会降低性能吗？你能提供一个来源来证明这一点吗？
有人可以确认吗？