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

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

Jawaban:

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