ความแตกต่างระหว่างวงเล็บปีกกาคู่และเดี่ยวใน JS เชิงมุมคืออะไร?

ฉันยังใหม่กับโลกเชิงมุมนี้ฉันค่อนข้างสับสนกับการใช้เครื่องหมายปีกกาคู่ {{}} และวงเล็บปีกกาเดี่ยว {} หรือบางครั้งไม่มีการใช้เครื่องหมายปีกกาหยิกเพื่อรวมการแสดงออกเช่นในคำสั่ง

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

{{}} - วงเล็บปีกกาคู่:

{{}} เป็นการแสดงออกเชิงมุมและค่อนข้างมีประโยชน์เมื่อคุณต้องการเขียนเนื้อหาลงใน 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>

อีกสิ่งหนึ่งเกี่ยวกับ{{}} มันยังใช้เป็น Watcher .. โปรดหลีกเลี่ยงมากที่สุดเพื่อประสิทธิภาพที่ดีขึ้น

ฉันรู้ว่านี่เป็นโพสต์เก่าและอาจเป็นหัวข้อออกไปเล็กน้อย แต่นี่เป็นคำตอบของ @DonD และ @GafrieldKlon ...

มันจะดูเหมือนผู้พิทักษ์ถูกวางไว้จริงถ้าคุณจะใช้ng-bindสั่งไม่ได้{{}}เมื่อใช้ ที่ถูกกล่าวว่าฉันเชื่อว่า @riyas คำตอบข้างต้นยังคงเป็นจริงบางส่วนในการหลีกเลี่ยง {{}}นั้นโดยทั่วไปจะดีกว่าสำหรับการทำงาน แต่ไม่ใช่ด้วยเหตุผลที่ระบุไว้

คำตอบสำหรับโพสต์อื่นนี้อธิบายรายละเอียดเพิ่มเติมนี้