AngularJS | 디렉티브(directive) | 이벤트 설정


디렉티브는 표시를 커스터마이징하는 것만 할 수 있는 것은 아니다. 태그에 이벤트를 결합하여 움직이는 디렉티브를 만들 수 있다.

이것은 따로 특별한 테크닉이 필요한 것은 아니다. directive에서 전달되는 element 인수는 DOM 요소이기 때문에, 그대로 이벤트의 설정할 수 있다. onclick 속성 등에 함수를 대입하거나 또는 addEventListener 메소드를 호출하여 설정하면 된다.

간단한 예제를 아래에 올려 두었다.

var myapp = angular.module('myapp',[]);
 
myapp.directive('click', function(){
    return function(scope, element, attrs){
        element[0].addEventListener("click", function(){
            var txt = this.textContent;
            alert('you click "' + txt + '"!');
        }, false);
    };
});

이것은 클릭하면 alert를 표시하는 <click> 태그 디렉티브이다. 예를 들어, 아래와 같이 태그를 작성한다.

<click>This is click sample!</click>

이 텍스트 부분을 클릭하면 화면에 알림 창이 나타나 you click "This is click Sample!"!라는 메시지가 표시된다.

여기에서는 return하는 함수 객체 안에 다음과 같이 이벤트를 지정한다.

element[0].addEventListener("click", function(){
    ...... 클릭 처리 ......
}, false);

보통 이벤트 지정과 동일하다. 이것으로 디렉티브는 DOM 요소에도 보통으로 이벤트를 추가할 수 있다.