AngularJS | 디렉티브(directive) | 디렉티브 기본 및 생성


AngularJS에서는 HTML 태그에 고유한 속성을 추가하고, 혹은 태그를 작성하여 HTML안에 특수한 기능을 할당했다. 이러한 기능을 “지시어” 즉, 디렉티브(directive)라고 한다.

이 디렉티브은 AngularJS에 제공되어 있을 뿐만 아니라 직접 만들 수도 있다. 직접 디렉티브을 작성하여 자신만의 태그를 추가해 나갈 수 있는 것이다.

디렉티브은 모듈에 작성한다. 모듈의 객체에 제공하고 있는 “directive"라는 메소드를 이용하여 만든다. 이는 다음과 같은 형태로 작성한다.

모듈.directive(이름, 함수);

첫번째 인수는 디렉티브의 이름을 지정한다. 이 이름이 그대로 태그 이름과 속성 이름으로 사용할 수 있게된다. 두번째 인수에 디렉티브의 구체적인 처리를 하는 함수 객체를 지정한다.

directive 메소드 자체의 사용법은 간단한다. 문제는 인수에 제공하는 함수를 어떻게 만들면 되는가? 이다. 이는 “지시문에서 필요한 값을 가진 개체를 반환"처리를 생각합니다.

우선은 가장 간단한 형태로 “template"라는 값을 가진 객체를 반환하는 디렉티브 함수를 보도록 하자. 이는 다음과 같다.

function() {
    return {template: ... 출력 내용 ...};
}

“template"는 출력 태그의 템플릿이다. 즉, 여기에 준비한 내용이 그대로 Web 페이지에 표시된다고 할수 있다.

간단한 디렉티브 생성

간단한 예제를 만들어 보자. 여기에서는 “OK!“라고 출력하는 OK 디렉티브를 만들어 보겠다.

우선 다음과 같이 스크립트를 작성하고 “script.js"라고 저장한다.

var myapp = angular.module('myapp',[]);

myapp.directive('ok', function(){
    return {
        template:'<span style="font-size:24pt;color:red;">OK!</span>'
    };
});

여기에서는 directive의 첫번째 인자에 ‘ok’라고 지정하고 있다. 두번재 인수는 return {template : ...}와 같은 문장만을 수행하는 함수를 지정하고 있다. 디렉티브의 기본적인 구조를 안다면 그렇게 어려운 것을 하고 있는 것은 아니다라는 것을 알 것이다.

그럼, 이를 실제로 사용을 해보자. 아래에 HTML 파일의 예제를 올려 두었다.

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script>
    <style>
    body { color:gray; }
    h1 { font-size:18pt; font-weight:bold; }
    </style>
</head>
<body ng-app="myapp" ng-init="num=0">
    <h1>디렉티브</h1>
    <ok></ok>
</body>
</html>

이 Web 페이지를 열면, 빨간색으로 “OK!“가 표시된다.

리스트을 보면, <ok></ok>라는 태그가 작성되어 있고, 이것이 OK 디렉티브문을 이용하고 있는 부분이다. HTML은 <ok/>이라는 태그는 물론 없다. 이 <ok/> 태그가 아래와 같은 태그로 변환되는 것이다.

<span style = "font-size : 24pt; color : red;"> OK! </ span>

이러한 디렉티브를 사용하면, 간단한 커스텀 태그를 사용하여 복잡한 표시도 할 수 있다.