AngularJS의 지시문 범위에서 '@' 와 '=' 의 차이점

질문 : AngularJS의 지시문 범위에서 '@'와 '='의 차이점은 무엇입니까?

---

주제에 대한 AngularJS 문서를주의 깊게 읽은 다음 지시문을 다루었습니다. 여기에 바이올린이 있습니다.

다음은 몇 가지 관련 스 니펫입니다.

• HTML에서 :

  <pane bi-title="title" title="{{title}}">{{text}}</pane>

• pane 지시문에서 :

  scope: { biTitle: '=', title: '@', bar: '=' },

 

 

내가 이해하지 못하는 몇 가지 사항이 있습니다.

• '@' 에는 "{{title}}" '을, '=' 에는 "title" '을 사용해야합니까?
• 속성으로 요소를 장식하지 않고 부모 범위에 직접 액세스 할 수도 있습니까?
• 문서에는 "표현식을 통해 격리 된 범위에서 부모 범위로 데이터를 전달하는 것이 바람직합니다."라고 나와 있지만 양방향 바인딩에서도 잘 작동하는 것 같습니다. 왜 표현 경로가 더 좋을까요?

식 솔루션을 보여주는 또 다른 바이올린을 찾았습니다. http://jsfiddle.net/maxisam/QrCXh/

답변

---

'@ '와 함께 "{{title}}"을 , '= '와 함께 "title"을 사용해야하는 이유는 무엇입니까?

@ 는 로컬 / 지시적 범위 속성을 DOM 속성의 평가 된 값에 바인딩합니다. title=title1 또는 title="title1" 을 사용하는 경우 DOM 속성 "title"의 값은 단순히 title1 문자열입니다. title="{{title}}" 을 사용하는 경우 DOM 속성 "title"의 값은 {{title}} 의 보간 된 값이므로 문자열은 현재 설정된 상위 범위 속성 "title"이됩니다. 속성 값은 항상 문자열이므로 @를 사용할 때 지시문 범위에서이 속성에 대한 문자열 값으로 끝납니다.

= 로컬 / 지시적 범위 속성을 부모 범위 속성에 바인딩합니다. 따라서 = 를 사용하면 상위 모델 / 범위 속성 이름을 DOM 속성 값으로 사용합니다. = 와 함께 {{}} 사용할 수 없습니다.

title="{{title}} and then some" 같은 작업을 수행 할 수 있습니다. {{title}}이 보간 된 다음 "and them some"문자열이 그와 연결됩니다. 마지막으로 연결된 문자열은 로컬 / 지시문 범위 속성이 가져 오는 것입니다. (= 로는 할 수없고 @ 만 가능합니다.)

@ 를 사용하면 link (ing) 함수에서 값을 사용해야하는 경우 attr.$observe('title', function(value) { ... }) 예를 들어 if(scope.title == "...") 은 예상대로 작동하지 않습니다. 이는이 속성에 비동기 적으로 만 액세스 할 수 있음을 의미합니다. 템플릿의 값만 사용하는 경우 $ observe ()를 사용할 필요가 없습니다. 예 : template: '<div>{{title}}</div>' .

= 를 사용하면 $ observe를 사용할 필요가 없습니다.

속성으로 요소를 장식하지 않고 부모 범위에 직접 액세스 할 수도 있습니까?

예,하지만 격리 범위를 사용하지 않는 경우에만 가능합니다. 지시문에서이 줄을 제거하십시오.

scope: { ... }

그러면 지시문이 새 범위를 만들지 않습니다. 부모 범위를 사용합니다. 그런 다음 모든 상위 범위 속성에 직접 액세스 할 수 있습니다.

문서에는 "표현식을 통해 격리 된 범위에서 부모 범위로 데이터를 전달하는 것이 바람직합니다."라고 나와 있지만 양방향 바인딩에서도 잘 작동하는 것 같습니다. 왜 표현 경로가 더 좋을까요?

예, 양방향 바인딩을 사용하면 로컬 / 지시문 범위와 상위 범위가 데이터를 공유 할 수 있습니다. "표현식 바인딩"을 사용하면 지시문이 DOM 속성으로 정의 된 표현식 (또는 함수)을 호출 할 수 있으며 데이터를 표현식 또는 함수에 인수로 전달할 수도 있습니다. 따라서 부모와 데이터를 공유 할 필요가없는 경우 (부모 범위에 정의 된 함수를 호출하려는 경우) & 구문을 사용할 수 있습니다.

또한보십시오

• Lukas의 격리 된 범위 블로그 게시물 (@, =, & 포함)
• dnc253의 @ 및 = 설명
• 범위에 대한 내 블로그와 같은 답변 -지시문 섹션 (요약 섹션 바로 앞의 맨 아래)에는 격리 범위와 상위 범위의 그림이 있습니다. 지시문 범위는 한 속성에는 @를 사용하고 다른 속성에는 =를 사용합니다.
• angularJS에서 & 대 @ 및 =의 차이점은 무엇입니까

출처 : https://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope-in-angularjs