AngularJS 기본 문법 - 사용자 지정 디렉티브

 AngularJS에는 기본 내장 디렉티브들뿐만 아니라, 사용자가 직접 디렉티브를 생성해서 사용할 수도 있다. 디렉티브를 생성하는 데에는 기본적으로 아래의 구조를 따른다.

var app = angular.module("모듈명", [])
app.directive("디렉리브명", [], function(){
	return {            	
		restrict: E/A/C/M(조합 가능),                
		template/templateUrl: "",
		replace: true/false,
        	priority: x
        	transclude: true/false,
        	scope: true/false, {...}
	}        
});

디렉티브를 생성할 때에는 아래와 같은 옵션들을 줄 수 있다.

1) restrict

디렉티브를 적용할 DOM element의 속성을 의미한다. 값에 따라 다른 형태로 사용할 수 있다. 따로 지정하지 않을 경우 기본적으로 EA로 정의된다.

(1) E : Element

<디렉티브명></디렉티브명>

(2) A : Attribute

<div 디렉티브명></div>

(3) C : Class

<div class="디렉티브명"></div>

(4) M : Comment

<!-- 디렉티브명 -->

 

2) template

 디렉티브를 적용하는 부분에 보여줄 내용을 의미한다. In-Line Value 형태이다.

<script>
	angular
    	.module("moduleName", [])
    	.directive("directiveName", function(){
        	restrice: E,
            	template: "<p>Directive 1</p>",
	});
</script>

<moduleName></moduleName>

위와 같이 디렉티브를 적용할 경우 "Directive 1"이 출력된다. 

 

 

2) templateUrl

 디렉티브를 적용하는 부분에 보여줄 html 파일을 의미한다.

index.html

<script>
	angular
		.module("moduleName", [])
    	.directive("directiveName", function(){
        	return {
            		restrict: E,
                	templateUrl: "js/directive1.html"
            	}
        });
</script>

<directiveName></directiveName>

 

partial.html

<p>Directive 2</p>

위와 같이 디렉티브를 적용할 경우 "Directive 2"이 출력된다.

 

3) replace

 디렉티브를 사용한 HTML 태그에 template 혹은 templateUrl의 내용을 추가할지 교체할지 여부를 선택한다. true일 경우에는 기존 태그를 교체한다.

<script>
	angular
    	.module("moduleName", [])
        .controller("ctrl", [], function($scope){
			$scope.name = "Jack"
         })
    	.directive("directiveName", function(){
        	return {
            		restrict: E,
                	template: <p>My name is {{name}}</p>,
                	replace: true
              	}
         });
                
</script>

<directiveName></directiveName>

 위의 경우에는 렌더링될 때 '<directiveName><p>My name is Jack</p></directiveName>'의 형태로 렌더링되게 된다.

 

4) priority

 값이 클 수록 우선순위가 높으며, 먼저 호출된다. 기본값은 0이다.

 

5) transclude

HTML에서의 디렉티브 코드 내의 내용을 template 혹은 templateUrl의 내용에 포함시킬 것인지를 선택한다. true일 경우 <ng-transclude>를 통해 포함시킬 수 있다.

<script>
	angular
    	.module("moduleName", [])
        .controller("ctrl", [], function($scope){
			$scope.name = "Jack"
         })
    	.directive("directiveName", function(){
        	return {
            		restrict: E,
                	template: <p><ng-transclude>My name is {{name}}</p>,
                	transclude: true
            	}
         });
</script>

<directiveName>Hi, </directiveName>

 위의 경우에 "Hi, My name is Jack"이 출력되게 된다.

 

6) scope

 scope 생성 옵션이다. 기존의 부모 scope 객체를 공유하기 위해선 false값을, 새로운 scope 객체를 생성해 부모 scope 객체를 상속받으려면 false값을 줄 수 있다. 부모 scope 객체와 독립된 별개의 scope 객체를 생성하기 위해선 {...}의 형태로 정의할 수 있다.

 부모 scope 객체로부터 독립된 scope 객체를 생성할 경우에 부모 scope 객체에 접근할 수 있는 방법이 아예 없는 것은 아니다. Binding 전략을 통해 가능하다.

• = : 부모 scope 객체의 property와 디렉티브의 property를 data binding하여 부모 scope에 접근
• @ : 디렉티브의 attribute value를 {{ }}방식을 이용함으로써 부모 scope 객체에 접근