Відмінність подвійної та одинарної фігурної дужки у кутовій JS?

192

Я новачок у цьому кутовому світі, мене трохи бентежить використання подвійних фігурних брекетів {{}} та одинарних фігурних дужок {} або коли-небудь жодна фігурна дужка не використовується для включення виразу, як у директивах

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

angularjs

— Мохамед Хуссейн
джерело

279

{{}} - подвійні фігурні брекети:

{{}} є кутовими виразами і дуже зручні, коли ви хочете писати речі в 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>

— ЗавждиAnerner
джерело

2

Ми можемо використовувати {{}} з директивою ng-include, у властивості ng-src.

— Джей Шукла

5

Як і хтось згаданий у коментарях, подвійні дужки {{}} повинні міститись у директиві ng-src між цитатами. Але чому ng-src здатний це зробити? Чи існує назва спеціального роду директив, що містить {{}} внутрішні лапки?

— ayjay

Чи є різниця між {{foo-bar}} і "{{foo-bar}}"?

— aandis

5

Мені довелося зробити трохи більше досліджень з цього питання, щоб повністю зрозуміти це, але я вважав, що ця публікація блогу справді допомогла разом із відповіддю @ CodeHater, чому AngularJS іноді використовує одинарні дужки {}, іноді подвійні дужки {{}}, а іноді немає брекетів?

— Prancer

2

ще одна річ про {{}} це також використовується як Watcher .. Будь ласка, уникайте якомога більше для кращої роботи

— ріяс ва
джерело

3

Ви мали на увазі {{}} погіршення продуктивності? Чи можете ви надати джерело, щоб довести це?

— Дон Д

1

Хтось може це підтвердити?

— GarfieldKlon

1

Я знаю, що це стара публікація і може бути трохи поза темою, але це у відповідь на @DonD і @GafrieldKlon ...

Здавалося б, спостерігач насправді розміщений, якби ви використовували ng-bindдирективу, а не під час використання {{}}. Зважаючи на це, я вважаю, що відповідь @riyas вище все ще частково правдива в тому, що уникнення, {{}} як правило, краще для виконання, але не з вказаної причини.

Ця відповідь на інший пост пояснює це детальніше.

— Плебо
джерело