Разница между двойной и одинарной фигурной скобкой в ​​угловых JS?

192

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

  1. ng-class={expression}
  2. normal data binding like{{obj.key}}
  3. 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>

 

AlwaysALearner
источник
2
Мы можем использовать {{}} с директивой ng-include в свойстве ng-src.
Джей Шукла
5
Как и кто-то, упомянутый в комментариях, двойные скобки {{}} должны быть помещены в директиву ng-src между кавычками. Но почему ng-src может это сделать? Есть ли имя для директив специального вида, которые заключают {{}} в кавычки?
Ajjay
Есть ли разница между {{foo-bar}} и "{{foo-bar}}"?
аандис
5
Мне нужно было немного больше изучить этот вопрос, чтобы полностью понять его, но я подумал, что это сообщение в блоге действительно помогло вместе с ответом @ CodeHater: Почему AngularJS иногда использует одиночные скобки {}, иногда двойные скобки {{}}, а иногда без брекетов?
Prancer
2

Еще одна вещь об {{}} этом также используется в качестве наблюдателя .. пожалуйста, избегайте как можно больше для лучшей производительности

Риас Ва
источник
3
Вы имели в виду {{}} снижает производительность? Можете ли вы предоставить источник, чтобы доказать это?
Дон Д
1
Кто-нибудь может это подтвердить?
GarfieldKlon
1

Я знаю, что это старый пост и может быть немного не по теме, но это в ответ на @DonD и @GafrieldKlon ...

Казалось бы, наблюдатель на самом деле помещается, если вы должны использовать ng-bindдирективу, а не при использовании {{}}. При этом, я полагаю, что ответ @riyas выше все еще частично верен в том, что избегание, {{}} как правило, лучше для производительности, но не по указанной причине.

Этот ответ на другой пост объясняет это более подробно.

Плибо
источник