AngularJS | 디렉티브(directive) | 속성 디렉티브 생성


태그 자체를 통째로 디렉티브로 만들뿐 아니라 속성으로써 디렉티브을 만들 수 있다. 속성으로 지정하는 지시어는 다양한 HTML 태그 다음에 추가하여 사용할 수 있다는 장점이 있다.

이는 기본적인 작성법은 이전에 설명하였다. 객체를 return하는 방식과 동일하다. 다만, 지정하는 값이 조금 다를 뿐이다. 정리하면 이렇게 된다.

모듈.directive( 이름 , 
    function() {
        return {
        restrict: 'A',
        template: 출력 내용
        };
    });

directive에서 return하는 함수 객체에는 template 외에 “restrict"라는 값을 지정해 주고 있다. 이것은 그 디렉티브가 어디에 사용할 수 있는지를 나타내는 것으로, 다음과 같은 값을 사용할 수 있다.

  • ‘E’ : 요소로 사용할 수 있다. <ok>와 같은 형태이다.
  • ‘A’ : 속성으로 사용할 수 있다. <p ok>와 같은 형태이다.
  • ‘AE’ : 위 모두에서 사용할 수 있다.

restrict:'A'를 지정하면, 속성으로 사용할 디렉티브를 만들 수 있다는 것이다.

그럼 간단한 예제로 아래에 스크립트를 올려 두었다.

myapp.directive('ok', function(){
    return {
        restrict: 'A',
        template:function(scope, element){
            var size = 24;
            switch(element['ok']){
            case 'large':
                size = 48; break;
            case 'midium':
                size = 36; break;
            case 'small':
                size = 24; break;
            }
            var obj = scope[0];
            var tag ='<span style="font-size:' + size
                + 'pt">' + scope[0].textContent
                + '</span>';
            return tag;
        }
    };
});

이것은 ok 특성에 3개의 값을 작성되어 있다. 예를 들어, 이런 식으로 사용한다.

<div ok="large">This is Large sample!</div>
<div ok="midium">This is Midium sample!</div>
<div ok="small">This is Small sample!</div>

여기에서는 template 속성 값에 함수를 지정하고 있다. 복잡한 처리를 할 경우는 그렇게 하는 것이 편리하기 때문이다. 그러나 함수를 지정하는 경우에는 인수에 주의해야 한다.

template:function(scope, element){……});

이와 같이, scope와 element 2가지가 전달된다. 속성의 값은 element에서 직접 얻어 낼 수 있다. 여기에서는 element['ok']에서 ok 속성의 값을 얻고 있다.

또한, 이 ok 속성이 있는 태그 안에 작성되는 값은 scope[0].textContent로 얻어 오고 있다. element 가 아니고, scope에서 얻어 올 수 있기 때문에 주의가 필요하다.

속성 디렉티브는 어디까지나 주가 되는 태그에 추가하는 것이므로, 그 태그 자체를 과감하게 변경해 버리는 것이 아니라, 거기에 뭔가를 추가하는 정도의 것으로 설계하는 것이 좋다. 통째로 변경해 버리는 것은 요소로서 작성하는 것이 좋다.