Perbedaan antara penjepit keriting ganda dan tunggal dalam sudut JS?

192

Saya baru di dunia sudut ini, saya agak bingung dengan penggunaan kurung kurawal ganda {{}} dan kurung kurawal tunggal {} atau kadang-kadang kurawal kurawal digunakan untuk memasukkan ekspresi seperti dalam arahan

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

angularjs

— Mohamed Hussain
sumber

279

{{}} - kurung kurawal ganda:

{{}} adalah ekspresi Angular dan berguna ketika Anda ingin menulis hal-hal ke 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>

Jangan gunakan ini di tempat yang sudah ekspresi!

Misalnya, arahan ngClickmemperlakukan apa pun yang ditulis di antara tanda kutip sebagai ungkapan:

<!-- so dont do this! -->
<!-- <button ng-click="activate({{item}})">... -->

{} - kurung kurawal tunggal:

{}seperti yang kita ketahui singkatan dari objek dalam JavaScript. Di sini juga, tidak ada yang berbeda:

<div ng-init="distanceWalked = {mon:2, tue:2.5, wed:0.8, thu:3, fri:1.5, 
sat:2, sun:3}">

Dengan beberapa arahan seperti ngClassatau ngStyleyang menerima peta:

<span ng-style="{'color' : 'red'}">{{viruses.length}} viruses found!</span>

<div ng-class="{'green' : vegetable == 'lettuce', 
'red' : vegetable == 'tomato'}">..

tidak ada kurung kurawal:

Seperti yang sudah disebutkan, jangan gunakan gelang saat ekspresi dalam. Cukup sederhana:

<div ng-if="zoo.enclosure.inmatesCount == 0">
    Alarm! All the monkeys have escaped!
</div>

— Selalu Belajar
sumber

2

Kita dapat menggunakan {{}} dengan ng-include directive, di properti ng-src.

— Jay Shukla

5

Seperti seseorang yang disebutkan dalam komentar, kurung kurawal {{}} seharusnya dimasukkan ke dalam arahan ng-src di antara tanda kutip. Tapi mengapa ng-src bisa melakukan itu? Apakah ada nama untuk jenis arahan khusus yang menggunakan {{}} di dalam tanda kutip?

— ayjay

Apakah ada perbedaan antara {{foo-bar}} dan "{{foo-bar}}"?

— aandis

5

Saya harus melakukan sedikit penelitian lebih lanjut tentang hal ini sendiri untuk sepenuhnya memahaminya, tapi saya pikir posting blog ini benar-benar membantu bersama dengan jawaban @ CodeHater, Mengapa AngularJS kadang-kadang menggunakan kawat gigi tunggal {}, kadang-kadang kawat gigi ganda {{}}, dan kadang-kadang tidak ada kawat gigi?

— Prancer

2

satu hal lagi tentang {{}} itu juga digunakan sebagai Watcher .. harap menghindari sebanyak mungkin untuk kinerja yang lebih baik

— riyas va
sumber

3

Apakah maksud Anda {{}} menurunkan kinerja? Bisakah Anda memberikan sumber untuk membuktikannya?

— Don D

1

Adakah yang bisa mengkonfirmasi itu?

— GarfieldKlon

1

Saya tahu ini adalah posting lama dan mungkin sedikit keluar dari topik, tetapi ini sebagai tanggapan terhadap @DonD dan @GafrieldKlon ...

Tampaknya pengamat ditempatkan jika Anda menggunakan ng-bindarahan, bukan saat menggunakan {{}}. Yang sedang berkata, saya percaya jawaban @riyas di atas sebagian masih benar bahwa menghindari {{}} umumnya lebih baik untuk kinerja, tetapi tidak untuk alasan yang dinyatakan.

Jawaban untuk posting lain ini menjelaskan ini secara lebih rinci.

— Pleebo
sumber