[AngularJS] directive 선언하여 사용시 restrict 옵션 정리

후... 포스팅을 쓰다가 날라갔는데 임시저장이 안되서 다시 쓴다. ㅂㄷㅂㄷ

페이지를 개발하다가 보면 같은 기능을 하는 플러그인이나 태그 등 반복적으로 사용하게 된다.

AngularJS 를 이용하여 개발을 하게 되면, 디렉티브(directive)를 사용하여 간단하게 가져다 사용할 수가 있다.

 이 디렉티브를 사용할 때, restrict 옵션을 사용하여 어떤 형식으로 사용할지 정하게 된다.

restrict 옵션은 총 4가지가 있는데, 상황이나 취향에 맞게 사용하면 된다.

restrict 옵션 :

1. 'A' :  html 태그의 속성값의 이름으로 사용
   
2. 'E' : 디렉티브를 html 태그와 같은 형식으로 사용
3. 'C' : 태그의 클래스명으로 지정하여 사용
4. 'M' : 주석으로 작성하여 사용

각 옵션의 사용법을 간단한 예제로서 알아보자.

angular.module('docsRestrictDirective', [])
.directive('autoSize', function() {
  return {
    restrict: 'A', // 'A', 'E', 'C', 'M' 또는 조합하여 사용할수 있다.  예) 'AEC'
    ...
  }
});

//옵션 : 'A;
<textarea auto-size=""></textarea>

//옵션 : 'E'
<auto-size></auto-size>

//옵션 : 'C'
<input class="auto-size">

//옵션 : 'M'
<!-- directive: auto-size -->

위와 같은 형태가 된다.

자 잘 활용해서 개발 속도를 올려보자!