(AngularJS) Angular.js Directive Scope Binding 전략

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

그러나 scope속성을 true로 바꿀시 Directive는 별도의 스코프를 가지게 되어 myDirective에 넣어준 값이 myCtrl에는 적용되지 않는 것을 확인 할 수 있다.


<Two-way Binding>

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




<Text Binding>

복잡한 객체 데이터나 동기화가 꼭 필요하지 않을 때는 @을 이용해 Text Binding을 사용할 수 있다.




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


<&용법>

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



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