작성자 : 이기섭
작성일 : 2016-02-06
디렉티브의 가장 첫 쓰임새는 문서 객체 모델(DOM)에서 엘리먼트를 설정하고 스타일을 적용하는데 사용한다.
아래는 엘리먼트 디렉티브 종류이다.
| 디렉티브 | 적용 방식 | 설명 |
|---|---|---|
| ng-if | 어트리뷰트 | DOM에서 엘리먼트를 추가 및 제거한다. |
| ng-class | 어트리뷰트, 클래스 | 엘리먼트의 class 어트리뷰트를 설정한다. |
| ng-class-even | 어트리뷰트, 클래스 | ng-repeat 디렉티브 내에 생성된 짝수 번째 엘리먼트에 class 어트리뷰트를 설정한다. |
| ng-class-odd | 어트리뷰트, 클래스 | ng-repeat 디렉티브 내에 생성된 홀수 번째 엘리먼트에 class 어트리뷰트를 설정한다. |
| ng-hide | 어트리뷰트, 클래스 | DOM 내 엘리먼트를 보여주거나 숨긴다. |
| ng-show | 어트리뷰트, 클래스 | DOM 내 엘리먼트를 보여주거나 숨긴다. |
| ng-style | 어트리뷰트, 클래스 | 하나 이상의 CSS 속성을 설정한다. |
이벤트가 일어날 때 커스텀 동작을 지정할 수 있는 이벤트 디렉티브를 정의하고 있다.
아래는 이벤트 디렉티브의 종류이다.
| 디렉티브 | 적용 방식 | 설명 |
|---|---|---|
| ng-blur | 어트리뷰트, 클래스 | 엘리먼트가 포커스를 잃을 때 일어나는 blur 이벤트에 대한 커스텀 동작을 지정한다. |
| ng-change | 어트리뷰트, 클래스 | 컨텐츠의 상태가 바뀔 때 (체크박스가 선택될 때, ㅑinput 엘리먼트의 텍스트가 편집될 때 등) 폼엘리먼트에서 일어나는 change이벤트에 대한 커스텀 동작을 지정한다. |
| ng-click | 어트리뷰트, 클래스 | 사용자가 마우스/포인터를 클릭할 때 일어나는 click 이벤트에 대한 커스텀 동작을 지정한다. |
| ng-copy ng-cut ng-paste |
어트리뷰트, 클래스 | 복사, 잘라내기, 붙여넣기 이벤트에 대한 커스텀 동작을 지정한다. |
| ng-dblclick | 어트리뷰트, 클래스 | 사용자가 마우스/포인터를 더블클릭할 때 일어나는 dblclick 이벤트에 대한 커스텀 동작을 지정한다. |
| ng-focus | 어트리뷰트, 클래스 | 엘리먼트가 포커스를 얻을 때 일어나는 focus이벤트에 대한 커스텀 동작을 지정한다. |
| ng-keydown ng-keyup ng-keypress |
어트리뷰트, 클래스 | 사용자가 키를 누르거나 키에서 손을 뗄 때 일어나는 keydown, keyup, keypress 이벤트에 대한 커스텀 동작을 지정한다. |
| ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup |
어트리뷰트, 클래스 | 사용자가 마우스/포인터를 사용해 엘리먼트와 상호작용할 때 일어나는 6가지 포준 마우스 이벤트(mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseup)에 대한 커스텀 동작을 지정한다. |
| ng-submit | 어트리뷰트, 클래스 | 폼이 전송될 때 일어나는 submit 이벤트에 대한 커스텀 동작을 지정한다. AngularJS의 폼 지원기능에 대해서는 12장을 참조하자. |
###특수 어트리뷰트 관리
HTML의 쿼크로 인해 AngularJS에서 일부 어트리뷰트가 문제를 일으켜 어쩔 수 없이 디렉티브를 사용해야 하는 경우가 있다.
그 중 하나가 어트리뷰트의 존재 여부로 속성이 결정되는 경우이다.
예를 들자면 disabled와 같은 경우인데, 이 경우 disabled의 존재만으로 해당 속성이 발생되며,
이 속성을 일반적으로는 제거할 수가 없다.
이런 것을 해결하는 것이 불리언 어트리뷰트 디렉티브이다.
아래는 불리언 디렉티브의 종류이다.
| 디렉티브 | 적용 방식 | 설명 |
|---|---|---|
| ng-checked | 어트리뷰트 | checked 어트리뷰트를 관리(input 엘리먼트에 사용)한다. |
| ng-disabled | 어트리뷰트 | disabled 어트리뷰트를 관리(input 및 button 엘리먼트에 사용)한다. |
| ng-open | 어트리뷰트 | onen 어트리뷰트를 관리(details 엘리먼트에 사용)한다. |
| ng-readonly | 어트리뷰트 | readonly 어트리뷰트를 관리(input 엘리먼트에 사용)한다. |
| ng-selected | 어트리뷰트 | seleted 어트리뷰트를 관리(option 엘리먼트에 사용)한다. |
AngularJS에서 직접적으로 작업을 수행할 수 없는 다른 어트리뷰트와 연동하는 디렉티브가 세가지 더 있다.
이들을 아래표에 정리하였다.
| 디렉티브 | 적용 방식 | 설명 |
|---|---|---|
| ng-href | 어트리뷰트 | a 엘리먼트의 href 어트리뷰트를 설정한다. |
| ng-src | 어트리뷰트 | img 엘리먼트의 src 어트리뷰트를 설정한다. |
| ng-srcset | 어트리뷰트 | img 엘리먼트의 srcset 어트리뷰트는 HTML5 확장을 위한 초안의 표준으로, 각기 다른 화면 크기 및 픽셀 밀도별로 여러이미지를 지정하게 해준다. 아직까지 브라우저 지원 수준은 제한적이다. |