角度JS中的双花括号和单花括号之间的区别？

192

我对这个尖角世界是陌生的，我对使用双花括号{{}}和单花括号{}感到困惑，或者有时不使用花括号来包含指令中的表达式

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

angularjs

279

{{}}-双大括号：

{{}} 是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接受map的指令：

<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>

— AlwaysALearner
source

2

我们可以在ng-src属性中将{{}}与ng-include指令一起使用。

— 杰·舒克拉

5

就像注释中提到的人一样，双括号{{}}应该放在引号之间的ng-src指令中。但是ng-src为什么能够做到这一点？是否有一种特殊的指令名称，它在引号内使用{{}}？

— 2014年

{{foo-bar}}和“ {{foo-bar}}”之间有什么区别吗？

— aandis 2014年

5

我必须对此做更多的研究才能完全理解它，但我认为此博客文章确实与@CodeHater的答案一起提供了帮助，为什么AngularJS有时使用单括号{}，有时使用双括号{{}}，有时没有大括号？

— Prancer

2

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

— 里亚斯州
source

3

您是说{{}}会降低性能吗？能否请您提供资料证明？

— 唐D

1

有人可以确认吗？

— 加菲尔德·

1

我知道这是一篇过时的文章，可能与主题无关，但这是对@DonD和@GafrieldKlon的回应...

如果您要使用ng-bind指令，则似乎要放置一个观察者，而不是使用时{{}}。话虽这么说，我相信上面的@riyas答案仍然部分正确，因为避免 {{}}通常会提高性能，但不是出于所陈述的原因。

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

— Pleebo
source