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

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

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

2 ответов


{{}} - двойные фигурные скобки:

{{}} являются угловыми выражениями и очень удобны, когда вы хотите написать материал в 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>

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