Angular.js Directive Scope Binding 전략

Angular.js의 가장 기본적인 구성요소인 directive의 scope binding은 다루기가 의외로 까다롭다.
게다가 binding 종류와 그 사용법에 대해 종종 잊어먹어서 =만 사용하게 되기도 하고, 그래서 정리를 할 필요를 느꼈다.

먼저 아래 코드를 보자.

myDirective의 link 로직에서 덮어씌운 값이 myCtrl에 있는 값에도 적용되는 것을 볼 수 있다. 즉, myDirective는 myCtrl의 스코프를 공용으로 사용한다.

그러나 위와 같이 scope 속성을 true로 주게 되면 Directive는 별도의 스코프(Isolated scope)를 가지게 되어 myDirective에서 넣어준 값이 myCtrl에는 적용되지 않는 것을 확인할 수 있다.
Directive scope 속성의 기본값은 false이므로, 별도로 스코프 지정을 하지 않는다면 부모의 스코프를 사용한다.

Two-way Binding

Directive에서 별도의 Scope를 사용할 때에도 특정 값을 바인딩할 수 있다.
먼저 가장 많이 사용하게되는 =는 Two-way Binding이다. 따라서 Directive 내에서 값을 변경하게 된다면 그것이 원래 데이터에도 영향을 미치게 된다.
물론, 원래 데이터를 변경하여도 그것을 사용하는 Directive에 영향을 미친다. 즉, 값의 동기화가 필요하다면 =을 사용하면 된다.

Text Binding

복잡한 객체 데이터나 동기화가 꼭 필요하지 않을 때는 @을 이용해 Text Binding을 사용할 수 있다.
@을 이용하면 Directive element의 attribute에 명시한 값을 그냥 text로 받아들인다.

그냥 attribute 값으로 직접 텍스트를 입력해도 되지만, scope의 동적인 값을 넘길 때는 Interpolation expression({{}})과 함께 활용해야 한다.

& 용법

&은 다른 녀석들과는 약간 다른 목적으로 사용된다.
별도의 Scope를 가지고 있는 Directive에서 부모 Scope로 특정한 값을 보내려면 Two-way Binding된 데이터를 그냥 바꾸는 방법밖에는 없는데, 만약 이 데이터를 다른 Controller나 Directive가 사용하고 있다면 어떤 사이드 이펙트가 나올지 모른다.
그런 경우 데이터 전달용으로 &을 사용할 수 있다.

위와 같이 &는 함수를 바인딩 하는데에 사용된다. 바인딩한 함수의 매개변수를 통해 데이터를 전달할 수 있다.
특이한 점으로는 directive onSubmit()의 매개변수로는 객체를 보내는데 상위의 submit()에서는 이 객체를 파싱해서 각 프로퍼티를 매개변수로 전달한다.
이유는 모르겠다..(공부 필요 -.-;)
어찌됐든 &을 사용하면 Two-way Binding 없이 각 Directive에서 사용하는 데이터를 상위 스코프로 전달할 수 있다.

Syntax

1

<my-directive author="author">

1
2
3

scope: {
  author: '='
}

위에서는 Binding Syntax를 전부 이런식으로 사용하고 있는데, 이것은 아래와 완전히 똑같이 동작한다.

1

<my-directive my-author="author">

1
2
3

scope: {
  author: '=myAuthor'
}

참고링크

• [AngularJS] 개발자 가이드 - 05. 지시자(Directives) (한국어)
• What is the difference between & vs @ and = in angularJS (StackOverflow)
• AngularJS Developer Guide: Directive (공식)
• AngularJS Directives, Using Isolated Scope with Attributes - 이 게시물은 블랙리스트다. 왜냐면 &를 One-way Binding이라고 하는데, 실제로 이 방식대로 사용하고 테스트해본 결과 read-only값도 아니며, 여기서 나온 방법으로 Binding을 해도 Two-way Binding과 전혀 차이가 없었다. 낚여서 한동안 그런식으로 사용하고 있었음.(실제로 공부하기 전까지만 해도 &이 One-way Binding인줄 알았다.)