AngularJS | 디렉티브(directive) | 요소(element) 조작


아주 간단한 태그를 작성하는 디렉티브라면, 이것으로 충분히 사용할 수 있다. 그런데, 보통의 HTML 태그라는 것은, 그렇게 간단한 사용하는 것은 <br> 정도일 것이다. 보통은 시작 태그와 종료 태그 사이에 값을 쓰거나, 태그에 속성을 지정하여 좀 더 표현력을 갖게 된다.

디렉티브에서도 이런 일이 가능하다. 여기에는 directive 메소드의 인수로 제공하는 함수를 약간 수정해야 한다.

앞전 예제에서는 directive 메소드의 두번째 인수에서 지정한 함수에는 객체를 return하도록 하였다. 이런 방식이라면, 객체에 값을 준비하는 정도 밖에 할 수 없다. 이보다 복잡한 처리는 할 수 없다는 것이다.

그래서 return하는 값을 “함수 객체"로 하는 것이다. 그리고 이 함수에서 필요한 작업을 수행하도록 하면 된다. 이 경우에 함수는 다음과 같은 형태로 정의한다.

function() {
    return function(scope, element, attrs) {
        ...... 필요한 처리 ......
    });
}

return이 함수에는 3개의 인수가 준비되어 있다. 이들은 각각 다음과 같은 역할을 한다.

  • scope : 이것은 범위의 객체입니다.
  • element : 이 지시문의 DOM 요소입니다.
  • attrs : 속성 정보를 취급하는 객체이다.

디렉티브 태그에 있는 텍스트와 태그에 포함된 속성을 이용하려면 element와 attrs를 사용한다. 이러한 객체에서 필요한 정보를 얻어 조작하면 된다.

지시문 작성

그럼 앞에서 작성한 script.js의 디렉티브를 수정하고, 속성 및 태그에 포함된 텍스트를 이용하도록 변경해 보자.

아래에 그 예제를 올려 두었다.

var myapp = angular.module('myapp',[]);
 
myapp.directive('ok', function(){
    return function(scope,element,attrs){
        var size = attrs['size'];
        size = size == null ? '24pt' : size;
        var color = attrs['color'];
        color = color == null ? 'red' : color;
        var txt = element[0].textContent;
        var tag = '<span style="font-size:' + size  + ';color:' + color + ';">' + txt + '</span>';
        element[0].innerHTML = tag;
    };
});

여기에서는 “size”, “color"라는 두 가지 속성과 태그에 적혀 있는 텍스트에 대응하는 처리를 하고 있다. 대략 정리하면 아래와 같다.

size와 color 속성

속성은 attrs 인수에 정리하고 있다. 여기에서는 이 attrs에서 size와 color 속성을 각각 변수에 얻을 수 있다.

var size = attrs['size'];
size = size == null ? '24pt' : size;
var color = attrs['color'];
color = color == null ? 'red' : color;

이 처럼 attrs[이름]라는 형태로, 지정된 이름의 속성 값을 얻을 수 있다. 그런데, 여기서 주의할 점은 “속성이 태그에 포함되지 않은 경우도 있다"는 것이다. 이 경우는 얻은 값은 undefined가 되기 때문에, 얻은 변수에 다시 값을 대입하도록 하여 대응해 두어야 한다.

태그의 값

예를 들어, <ok>Hello</ok>와 같이 태그에 값(여기에서는 Hello)를 작성하였을 때에, 이 값을 얻어 사용할 수 있다. 값은 다음과 같이 얻는다.

var txt = element[0].textContent;

인수로 전달되는 element가 디렉티브의 DOM 요소이다. 다만, 이것은 배열되어 있으며, 인덱스 번호 0 값이 첫번째 디렉티브의 DOM 요소가 된다(보통은 0번의 값 1개 밖에 없을 것이다).

element[0]에서 내부에 있는 값을 얻으려면, 여러가지 방법이 있을 것이다. 여기에서는 textContent로 이용하여 얻을 있다. 디렉티브 태그 또는 내부에 다른 태그가 내장되어 있거나 하면 이것으로는 처리할 수는 없지만, 단순히 내부에 텍스트가 작성되어 있다면 이것으로 충분하다.

element[0].innerHTML = tag;

그리고, 출력하는 태그를 텍스트로 작성하여 element[0].innerHTML에 그것을 대입한다. 이것으로 <ok> 태그의 내부가 교체된다.

디렉티브를 HTML에 통합

그럼 작성한 새로운 OK 디렉티브를 사용한다. 이용 예제를 아래에 올려 두었다.

<!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>This is sample!</ok>
    <hr>
    <ok size="36pt">This is size sample!</ok>
    <hr>
    <ok color="blue">This is color sample!</ok>
    <hr>
    <ok color="green" size="48pt">This is full sample!</ok>
</body>
</html>

여기에는 4개의 <ok> 태그를 작성하고 있다. 각각의 사용법은 아래와 같다.

· 특성 없음

<ok>This is sample!</ok>

· size 속성

<ok size="36pt">This is size sample!</ok>

· color 속성

<ok color="blue">This is color sample!</ok>

· size, color 속성

<ok color="green" size="48pt">This is full sample!</ok>

이처럼 size와 color 2가지 속성을 사용할 수 있다. 이러한 속성은 지정하지 않으면 각각 size="24pt", color="red"로 디폴트로 설정된다.

또한 모든 태그 안에 작성되어 있는 텍스트는 그대로 표시된다. 이것으로 텍스트의 색상과 크기를 간단히 설정할 수 있는 태그로써 <ok>를 만들 수 있게 되었다.