A를 directive사용하면 웹 구성 요소를 작성하기 위해 HTML 어휘를 선언적 방식으로 확장 할 수 있습니다. 이 ng-app속성은 지시문이므로 ng-controller모든 ng- prefixed attributes. 지침이 될 수 있습니다 attributes, tags심지어 나 class names, comments.
지시문이 생성되는 방법 ( compilation및 instantiation)
컴파일 : 우리는 compile함수가 manipulate렌더링되기 전에 DOM 을 사용하고 함수를 반환 할 link것입니다 (우리를 위해 링크를 처리 할 것입니다). 또한 instances이 지시문의 모든 부분과 공유해야하는 모든 메소드를 배치 할 수 있습니다 .
link : 이 link함수를 사용하여 템플릿에서 복제 된 특정 DOM 요소에 모든 리스너를 등록하고 페이지에 대한 바인딩을 설정합니다.
에서 설정하면 compile()기능들은은 (당신이 원하는 것을 종종있는) 한 번 설정 한 것입니다. link()함수 에서 설정하면 HTML 요소가
객체의 데이터에 바인딩 될 때마다 설정됩니다 .
<div ng-repeat="i in [0,1,2]">
<simple>
<div>Inner content</div>
</simple>
</div>
app.directive("simple", function(){
return {
restrict: "EA",
transclude:true,
template:"<div>{{label}}<div ng-transclude></div></div>",
compile: function(element, attributes){
return {
pre: function(scope, element, attributes, controller, transcludeFn){
},
post: function(scope, element, attributes, controller, transcludeFn){
}
}
},
controller: function($scope){
}
};
});
Compile함수는 preand post링크 함수를 반환합니다 . 사전 링크 함수에는 인스턴스 템플릿과의 범위가 controller있지만 템플릿은 범위에 바인딩되지 않았으며 여전히 포함 된 내용이 없습니다.
Postlink function은 post link가 마지막으로 실행되는 함수입니다. 지금은 transclusion완전하다 the template is linked to a scope, 그리고 view will update with data bound values after the next digest cycle. 이 link옵션은 post-link기능 설정 바로 가기 입니다.
controller : 지시어 컨트롤러는 다른 지시어 연결 / 컴파일 단계로 전달 될 수 있습니다. 인터-디렉티브 커뮤니케이션에 사용하기위한 수단으로 다른 디렉티브에 주입 될 수 있습니다.
필요한 지시문의 이름을 지정해야합니다. 동일한 지시문 또는 해당 부모에 바인드되어야합니다. 이름 앞에 접두사를 붙일 수 있습니다 :
? – Will not raise any error if a mentioned directive does not exist.
^ – Will look for the directive on parent elements, if not available on the same element.
대괄호 [‘directive1′, ‘directive2′, ‘directive3′]를 사용 하여 다중 지시문 컨트롤러가 필요합니다.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('parentDirective', function() {
return {
restrict: 'E',
template: '<child-directive></child-directive>',
controller: function($scope, $element){
this.variable = "Hi Vinothbabu"
}
}
});
app.directive('childDirective', function() {
return {
restrict: 'E',
template: '<h1>I am child</h1>',
replace: true,
require: '^parentDirective',
link: function($scope, $element, attr, parentDirectCtrl){
//you now have access to parentDirectCtrl.variable
}
}
});