toggle menu

[AngularJS] 간단한 지시어(directive) 사용 예제

2012.11.16 16:12 AngularJS

간단한 directive 사용예를 살펴보자.
지시어를 사용해서 hello-world 라는 태그를 실제 Hello World 로 출력해주는 예제이다.
단순하기 때문에 지시어를 어떻게 선언하고 어떻게 활용하는지에 대한 기본적인 이해를 얻기에 좋다.

<html ng-app="directiveExam">
<head>
    <meta charset="utf-8">
    <title>Directive Example</title>
     
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
    </script>
   
     
    <script type="text/javascript" charset="utf-8">

		//지시어 선언
		//지시어는 카멜 케이스로 네이밍한다.
    	angular.module('directiveExam.directive', []).directive('helloWorld', function()
    	{
    		return {
    			restrict: 'E', //Element(태그)
    			template: '헬로우 월드 ㅋㅋ'
    		};
    	});
    
        //어플리케이션 모듈을 선언하고, Directive를 인젝션한다.
        var directiveExam = angular.module('directiveExam', ['directiveExam.directive']);
         
    </script>
     
     
</head>
<body>
	<!-- 지시어를 사용할 때는 스네이크 케이스로 네이밍해준다. -->
    <hello-world></hello-world>
</body>
</html>

template 대신, templateUrl 을 사용해서 다른 HTML 파일을 로드해서 보여줄수도 있다.
restrict 에서 E는 element A는 attribute, C는 class, M은 comment 를 의미한다.

IE8에서는 Element 일 경우 인지가 안되는 상황이 있으므로, 주의가 필요하다.

AngularJS 관련 포스팅 더보기