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

Program / 글쓴이

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

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

답변

{{}}-이중 중괄호 :

{{}} 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>

 

답변

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

답변

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

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

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

답변