(AngularJS) 사용자 정의 디렉티브(directive)

참고: http://www.nextree.co.kr/p4850/

1. restrict

HTML에서 디렉티브를 사용하기 위한 DOM엘리먼트 속성을 설정
-restrict규칙을 생략할 경우 'A'로 선언한 것과 같은 효과를 나타낸다.


2. template

html의 디렉티브를 사용한 부분에 보여줄 내용으로 In-Line value를 설정.



3. templateUrl

template을 별도의 html파일로 관리
-templateUrl에 선언한 url에 해당하는 HTML을 로드합니다. 이때, index.html 위치를 기준으로 로드할 html의 상대위치를 정의합니다.




4. replace

디렉티브를 사용한 HTML의 태그에 template 또는 templateUrl에 포함된 태그 내용을 추가할지 교체할지 설정
true로 설정할 경우 HTML의 디렉티브를 사용한 태그를 template 또는 templateUrl에 작성된 내용으로 교체합니다.


5. priority

디렉티브 별로 compile()과 link()의 호출 우선순위를 지정(기본값은 0)
-priority 값이 클 수록 우선순위가 높고 먼저 호출된다.


6. transclude

ng-transclude를 이용하여 template 또는 tempalteUrl 에서 디렉티브내의 원본내용을 포함시킬지 설정.
true로 설정 시 디렉티브에 포함된 원본내용을 template의 ng-transclude를 사용한 곳으로 포함합니다.


7. scope

디렉티브의 scope를 설정

* 7. 1 scope옵션

• scope : false -> 새로운 scope객체를 생성하지 않고 부모가 가진 같은 scope객체를 공유(default 옵션)
• scope ; true -> 새로운 scope객체를 생성하고 부모 scope 객체를 상속.
• scope: { ... } -> isolate/isolated scope를 새롭게 생성

scope: { ... } 는 재사용한 컴포넌트를 만들 때 사용하는데 컴포넌트가 parent scope의 값을

read/write 못하게 하기 위함이다. 

parent scope에 접근 (access) 하고 싶을 경우 Binding전략(=, @, &)를 이용한다.

8.  bindToController
참고 : http://www.haruair.com/blog/3201

-> bindToController 는 controllerAs 문법과 함께 사용해야 한다. 이 문법은 컨트롤러를 클래스 같은 개체로 다룰 수 있게하는데 생성자처럼 초기화 하는 과정에서 그 초기화를 통해 네임스페이스를 통제할 수 있게 된다.
다음예를 보자.
<div ng-controller ="MainCtrl as vm">
 {% raw % }{{vm.name}}{% endraw %}
</div>

controllerAs 문법이 없었던 예전에는 컨트롤러에 대해 고유한 네임스페아가 제공되지 않아 JavaScript 객체 프로퍼티가 붕 뜬 상태처럼 DOM주변을 맴돌았는데 그로 인해 컨트롤러 내에서 일관성을 유지하기가 힘들었다.
게다가 $parent로 인한 상속문제도 지속적으로 발생했다.

이제 "상속된" 스코프가 필요하다. 그래서 고립된 스코프인 scope : {} 에 필요한 참조를 추가한다.

function fooDirective() {
  return {
    ....
   scope : {
     name: '='
   },
 .....
  };
}

이제 $scope를 주입해야 한다. 새로 작성한 클래스 같은 객체에 $scope객체를 주입하게 되면