각도 JS의 이중과 단일 곱슬 가새의 차이?

각도 JS의 이중과 단일 곱슬 가새의 차이?

나는 이 각진 세상에 처음이라 이중 컬리 괄호 {{}}와 단일 컬리 괄호 {}를 사용하거나 지시문과 같은 표현을 포함하기 위해 컬리 괄호를 사용하지 않는 경우가 있다.

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

{{}} - 양갈래 괄호:

{{}}는 각진 표현으로 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>

 

오래된 투고라는 것은 알고 있습니다만, 이것은 @DonD와 @GafrieldKlon에 대한 응답입니다.

감시자가 실제로 배치되어 있는 것 같습니다.ng-bind지시문, 사용 시 아님{{}}위의 @riyas의 답변이 여전히 부분적으로 맞는다고 생각합니다. {{}}일반적으로 퍼포먼스에는 더 좋지만, 그 이유는 설명되지 않습니다.

다른 투고에 대한 이 답변에서 더 자세히 설명합니다.

에 대해 하나 더{{}}감시자로도 사용됩니다.퍼포먼스 향상을 위해 가능한 한 피하세요

언급URL : https://stackoverflow.com/questions/17878560/difference-between-double-and-single-curly-brace-in-angular-js