각도 JS에서 이중 및 단일 중괄호의 차이점은 무엇입니까?

192

나는이 각도 세계에 익숙하지 않다. 나는 이중 중괄호 {{}}와 단일 중괄호 {}를 사용하는 것과 약간 혼동된다.

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

angularjs

279

{{}}-이중 중괄호 :

{{}} Angular 표현식이며 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-src 속성에서 ng-include 지시문과 함께 {{}}을 (를) 사용할 수 있습니다.

— Jay Shukla

5

주석에서 언급 한 바와 같이, 이중 중괄호 {{}}는 따옴표 사이에 ng-src 지시문에 있어야합니다. 그러나 ng-src는 왜 그렇게 할 수 있습니까? 따옴표 안에 {{}}를 사용하는 특수한 지시문의 이름이 있습니까?

— ayjay

{{foo-bar}}와 "{{foo-bar}}"사이에 차이점이 있습니까?

— aandis

5

나는 완전히 이해하려면이 자신을 좀 더 연구를했다,하지만 난이 블로그 게시물은 정말 CodeHater의 대답 @와 함께 도움이 생각 AngularJS와 때로는 하나의 중괄호 {}, 때로는 이중 중괄호 {{}}, 때로는를 사용하는 이유는 무엇 중괄호가 없습니까?

— Prancer

2

{{}} 그것에 대해 한 가지 더 Watcher로도 사용됩니다. 더 나은 성능을 위해 가능한 한 피하십시오

— 리 야스 버지니아
소스

3

{{}}이 (가) 성능을 저하 시킨다는 의미입니까? 이를 증명할 소스를 제공해 주시겠습니까?

— Don D

1

누군가 그것을 확인할 수 있습니까?

— GarfieldKlon

1

나는 이것이 오래된 게시물이며 약간의 주제가 아닐 수도 있지만 @DonD 및 @GafrieldKlon에 대한 응답입니다 ...

그것은 당신이 사용하는 것 인 경우에 실제로 배치 감시자 것 같다 ng-bind, 지시를 하지 사용할 때를 {{}}. 즉, 위의 @riyas 답변은 피하는 {{}} 것이 일반적으로 성능에 더 좋지만 언급 된 이유가 아니라는 점에서 여전히 부분적으로 사실이라고 생각 합니다.

다른 게시물에 대한이 답변 은 이것을 자세히 설명합니다.

— 플리 보
소스