Różnica między nawiasami klamrowymi podwójnymi i pojedynczymi w kątowym JS?

192

Jestem nowy w tym kanciastym świecie, jestem trochę zmieszany używaniem podwójnych nawiasów klamrowych {{}} i pojedynczych nawiasów klamrowych {} lub czasami nie używa się nawiasów klamrowych do uwzględnienia wyrażenia jak w dyrektywach

  1. ng-class={expression}
  2. normal data binding like{{obj.key}}
  3. ng-hide='mydata==="red"'
angularjs Mohamed Hussain
źródło

Odpowiedzi:

279

{{}} - podwójne nawiasy klamrowe:

{{}} są wyrażeniami kątowymi i przydają się, gdy chcesz pisać rzeczy do 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>

Nie używaj ich w miejscu, które jest już wyrażeniem!

Na przykład dyrektywa ngClicktraktuje wszystko, co napisano między cudzysłowami, jako wyrażenie:

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

{} - pojedyncze nawiasy klamrowe:

{}jak wiemy, oznaczają obiekty w JavaScript. Tutaj również nic innego:

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

W przypadku niektórych dyrektyw takich jak ngClasslub ngStyleakceptujących mapę:

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

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

bez nawiasów klamrowych:

Jak już wspomniano, po prostu bądź bezbronny w wyrażeniach wewnętrznych. Całkiem proste:

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

 

AlwaysALearner
źródło
2
Możemy użyć {{}} z dyrektywą ng-include we właściwości ng-src.
Jay Shukla
5
Jak ktoś wspomniany w komentarzach, podwójne nawiasy klamrowe {{}} powinny być umieszczone w dyrektywie ng-src między cudzysłowami. Ale dlaczego ng-src jest w stanie to zrobić? Czy istnieje nazwa specjalnego rodzaju dyrektyw, które zawierają {{}} w cudzysłowie?
ayjay
Czy jest jakaś różnica między {{foo-bar}} a „{{foo-bar}}”?
aandis
5
Musiałem przeprowadzić trochę więcej badań na ten temat, aby w pełni to zrozumieć, ale pomyślałem, że ten wpis na blogu naprawdę pomógł wraz z odpowiedzią @ CodeHater: Dlaczego AngularJS czasami używa pojedynczych nawiasów klamrowych {}, czasami podwójnych nawiasów klamrowych {{}}, a czasami żadnych aparatów ortodontycznych?
Prancer
2

jeszcze jedna rzecz w {{}} tym jest również używana jako Watcher .. unikaj jak najwięcej, aby uzyskać lepszą wydajność

riyas va
źródło
3
Czy miałeś na myśli, że {{}} obniża wydajność? Czy możesz podać źródło, które to udowodni?
Don D
1
Czy ktoś może to potwierdzić?
GarfieldKlon
1

Wiem, że jest to stary post i może być trochę nie na temat, ale jest to odpowiedź na @DonD i @GafrieldKlon ...

Wydaje się, że obserwator zostałby umieszczony, gdybyś używał ng-binddyrektywy, a nie podczas jej używania {{}}. Biorąc to pod uwagę, uważam, że powyższa odpowiedź @riyas jest nadal częściowo prawdą, ponieważ unikanie {{}} jest ogólnie lepsze dla wydajności, ale nie z podanego powodu.

Ta odpowiedź na inny post wyjaśnia to bardziej szczegółowo.

Pleebo
źródło