Angular.js Directive Scope Binding 전략


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

먼저 아래 코드를 보자.

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

그러나 위와 같이 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'
}

즉, 하이픈 방식의 표기로 directive element에 attribute를 지정해주면, 자바스크립트에서는 camelCase로 바꿔서 명시해주면 된다.
만약 스코프에서 사용하고 싶은 변수 식별자와 attribute 표기가 같다면 바인딩할 때 변수명은 생략할 수 있다.

참고링크