角のあるJSの二重と単一の波括弧の違いは？

私はこの角の世界に慣れていません。二重中かっこ{{}}と単一中かっこ{}の使用と少し混乱しています。

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

{{}}-二重中括弧：

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

もう1つ{{}} はウォッチャーとしても使用されます。パフォーマンスを向上させるために、できるだけ避けてください

私はこれが古い投稿であり、少しずれるトピックかもしれないことを知っていますが、これは@DonDと@GafrieldKlonへの応答です...

あなたが使用した場合ウォッチャーが実際に配置されて思わng-bindディレクティブ、ない使用します{{}}。そうは言っても、上記の@riyasの回答は、一般的にはパフォーマンスを改善すること {{}}は避けた方がよいという点で依然として部分的に当てはまると思います。

別の投稿へのこの回答は、これをより詳細に説明しています。