Açısal JS'de çift ve tek kıvırcık küme ayracı arasındaki fark nedir?

192

Bu açısal dünyada yeniyim, {{}} çift kıvırcık parantez ve tek kıvırcık parantez {} kullanımı ile biraz karışıkım ya da direktiflerde olduğu gibi ifadeyi dahil etmek için hiçbir kıvırcık ayraç kullanılmıyor

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

angularjs

— Mohamed Hussain
kaynak

279

{{}} - çift kıvırcık diş telleri:

{{}} Açısal ifadelerdir ve HTML'ye bir şeyler yazmak istediğinizde oldukça kullanışlıdır:

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

Bunları zaten ifade olan bir yerde kullanmayın!

Örneğin, yönerge ngClicktırnak işaretleri arasında yazılan her şeyi bir ifade olarak ele alır:

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

{} - tek kıvırcık parantez:

{}bildiğimiz gibi JavaScript'teki nesneleri temsil eder. Burada da farklı bir şey yok:

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

Haritayı kabul eden ngClassveya ngStylekabul eden bazı direktiflerle :

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

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

kıvırcık parantez yok:

Daha önce de belirtildiği gibi, ifadelerin içindeyken sadece ayraçsız olun. Oldukça basit:

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

— AlwaysALearner
kaynak

2

Ng-include yönergesiyle ng-src özelliğinde {{}} kullanabiliriz.

— Jay Shukla

5

Yorumlarda bahsedilen biri gibi, {{}} çift parantezinin tırnak işaretleri arasında ng-src yönergesine konması gerekir. Peki ng-src bunu neden yapabilir? {{}} Tırnak içine alan özel tür yönergeler için bir ad var mı?

— ayjay

{{Foo-bar}} ve "{{foo-bar}}" arasında herhangi bir fark var mı?

— aandis

5

Bunu tam olarak anlamak için bu konuda biraz daha araştırma yapmak zorunda kaldım, ancak bu blog yazısının @ CodeHater'ın cevabına gerçekten yardımcı olduğunu düşündüm , AngularJS neden bazen tek ayraçlar kullanıyor {}, bazen çift ayraçlar {{}} ve bazen diş teli yok mu?

— Prancer

2

Bu konuda bir şey daha {{}} Watcher olarak kullanılıyor .. lütfen daha iyi performans için mümkün olduğunca kaçının

— riyas va
kaynak

3

Bunu mu demek istediniz: {{}} performansı düşürüyor mu? Bunu kanıtlamak için lütfen bir kaynak sağlayabilir misiniz?

— Don D

1

Birisi bunu onaylayabilir mi?

— GarfieldKlon

1

Bu eski bir yazı olduğunu biliyorum ve konu biraz kapalı olabilir, ama bu @DonD ve @GafrieldKlon yanıt olarak ...

Bu Kullanmak olsaydı aslında yerleştirilir gözlemcisi bir görünüyor ng-bind, yönergesini değil kullanırken {{}}. Bununla birlikte, yukarıdaki @riyas cevabının, kısmen kaçınmanın {{}} genellikle performans için daha iyi olduğu , ancak belirtilen nedenden ötürü hala doğru olduğuna inanıyorum .

Başka bir gönderiye verilen cevap , bunu daha ayrıntılı olarak açıklamaktadır.

— Pleebo
kaynak