[angularJS] 디렉티브(directive)

<div ng-app="myApp"> <a class="custom-button">Click me</a> </div>

위의 것을 jsfiddle.net - html에 작성하고.

var myApp = angular.module('myApp', []); myApp.directive('customButton', function () { return { restrict: 'AC', replace: true, transclude: true, template: '<a href="" class="myawesomebutton" ng-transclude>' + '<i class="icon-ok-sign"></i>' + '</a>', link: function (scope, element, attrs) { // DOM manipulation/events here! } }; });

위의 것을 jsfiddle.net - javascript에 작성한다.

디렉티브는 여러개의 속성을 가지는 객체를 반환하는데, 

restrict, replace, transclude, template, templateUrl, link가 가장 중요한 속성이다.

코드를 실제로 jsfiddle.net에 삽입하고 개발자도구로 확인해보자.

- restrict: 어떻게 요소의 사용을 제한할 수 있을지 다시 한번 생각해보자. 오래된 IE를 지원해야하는 프로젝트를 진행중이라면 분명 속성/클래스 정의가 필요할 것이다. ‘A’라고 지정하면 속성 으로만 사용할 수 있다는 의미이고 ‘E’는 요소, ‘C’는 클래스, ‘M’은 주석 으로만 사용할 수 있다는 것을 의미한다. 기본 값은 ‘EA’이고 이 처럼 여러 개의 제한을 동시에 걸수도 있다.

- replace: 디렉티브에 정의한 DOM의 마크업을 변경할 수 있음을 의미한다. 예제를 보면 처음의 DOM이 디렉티브의 템플릿으로 어떻게 변경됐는지 알 수 있을 것이다.

- transclude: 간단하게 말해서 집어넣는 것이다. transclude를 이용하면 기존의 DOM 내용을 디렉티브안에 복사할 수 있다. ‘Click me’라는 문자열이 렌더링될 때 디렉티브로 옮겨진 것을 봤을 것이다.

- template: 템플릿은 주입할 마크업을 의미한다. HTML의 아주 작은 일부분을 정의할 때 특히 좋다. 주입된 템플릿은 Angular로 컴파일되며 이로 인해 handlebar 템플릿 태그도 사용할 수 있다.

- templateUrl: template 속성과 비슷하지만 <script> 태그 혹은 파일을 지정할 때 사용한다. HTML의 일부분을 다른 파일로 관리할 필요가 있을 때 템플릿 파일의 URL로 파일 이름과 경로(보통 templates 디렉토리)를 표시해주면 된다.

이렇게 정리를 해놓으셨다.

* 출처 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/