1. 개요
- AngularJS에서는 기존 HTML에서 제공하지 않는 기능을 확장하는 방식을 지시자(Directive)로 제공한다.
- 지시자 함수 : AngularJS에서는 해당 DOM과 연결된 하나의 함수를 만들고 이 함수가 DOM을 조작하여 새로운 기능을 추가하는 등의 행위를 한다.
지시자 함수는 연결된 특정 DOM에 $scope를 연결하거나 연결된 DOM을 조작(manipulate)하여 특정 행위를 정의 할 수 있다.
이런 지시자 함수를 이용해 HTML을 확장하는 것이다.
2. HTML에서 지시자를 사용하는 방법
- 지시자의 이름은 낙타표기법(camel case)으로 작성한다.
이런 지시자의 이름을 HTML(템플릿)에서는 영문자 중간에 대문자로 시작되는 부분에 : , -, 또는 _문자를 넣고 대문자를 소문자로 바꾸어 사용할 수 잇다.
예) myDirective라는 이름의 지시자가 있다면 이를 my-directive, my:directive, my_directive와 같은 형태로 HTML에서 사용한다.
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/lib/angular.js" ></script>
<script type="text/javascript">
angular.module('sampleApp', [])
.controller('mainCtrl', function($scope){
$scope.getStyle = function(){
return {"color" : "red"};
};
});
</script>
</head>
<body ng-controller="mainCtrl">
<p ng:style="getStyle()">hello</p>
<p class="ng_style: getStyle();">hello</p>
<ng-form name="groupForm">
<form name="formA"><input type="text"></form>
<form name="formB"><input type="text"></form>
</ng-form>
</body>
</html>
- 정의된 지시자를 HTML 템플릿에서 호출하는 방법
① 요소의 속성을 이용한 호출
예) <span my-directive="expression"></span>
② 요소의 클래스를 이용한 호출
예) <span class="my-directive: expression;"></span>
③ 요소 이름을 이용한 호출
예) <my-directive></my-directive>
④ 코멘트를 이용한 호출
예) <!-- directive: my-directive expression-->
3. AngularJS가 제공하는 지시자
- AngularJS는 HTML을 확장하는 여러 내장 지시자(built-in directive)를 제공한다.
- 지시자의 목록은 http://docs.angularjs.org/api/에서 API 문서를 보면 확인할 수 있다.
'AngularJS' 카테고리의 다른 글
| 18. 지시자 - 2 (사용자 정의 지시자) (0) | 2015.03.16 |
|---|---|
| 17. 지시자 웹 표준 준수 대비 및 오래된 인터넷 익스플로러 지원하기 (0) | 2015.03.16 |
| 15. 모듈(Module) (0) | 2015.03.16 |
| 14. $scope -2 ($scope에서 사용자 정의 이벤트 처리) (0) | 2015.03.11 |
| 13. $scope -1 ($scope의 계층구조 및 $scope 타입) (0) | 2015.03.11 |