A directivepozwala na poszerzenie słownictwa HTML w deklaratywny sposób do budowania komponentów internetowych. ng-appAtrybut jest dyrektywa, tak jest ng-controlleri wszyscy ng- prefixed attributes. Dyrektywy mogą być attributes, tagslub nawet class names, comments.
Jak powstają dyrektywy ( compilationi instantiation)
Kompilacja: użyjemy tej compilefunkcji zarówno manipulatedla DOM, zanim zostanie on zrenderowany, jak i zwrócimy linkfunkcję (która obsłuży dla nas linkowanie). Jest to również miejsce do umieszczenia wszelkich metod, które muszą być udostępnione wszystkim instancesz tej dyrektywy.
link: użyjemy tej linkfunkcji do zarejestrowania wszystkich detektorów w określonym elemencie DOM (sklonowanym z szablonu) i skonfigurowania naszych powiązań ze stroną.
Jeśli ustawione w compile() funkcji, byłyby ustawione tylko raz (co często jest tym, czego chcesz). Jeśli ustawione w link()funkcji, byłyby ustawione za każdym razem, gdy element HTML jest powiązany z danymi w
obiekcie.
<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){
}
};
});
Compilefunkcja zwraca funkcję prei postlink. W funkcji wstępnego linku mamy szablon instancji, a także zakres z controller, ale szablon nie jest powiązany z zakresem i nadal nie zawiera treści zawartej w transkluzji.
Postfunkcja link to miejsce, w którym link do strony to ostatnia funkcja do wykonania. Teraz transclusionjest gotowe,the template is linked to a scope , i view will update with data bound values after the next digest cycle. Ta linkopcja jest tylko skrótem do konfiguracji post-linkfunkcji.
kontroler: dyrektywy można przekazać do innej fazy łączenia / kompilacji dyrektywy. Może być wprowadzony do innych dyrektyw jako środek do wykorzystania w komunikacji między dyrektywami.
Musisz podać nazwę wymaganej dyrektywy - powinna ona być powiązana z tym samym elementem lub jego rodzicem. Nazwę można poprzedzić:
? – 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.
Użyj nawiasu kwadratowego, [‘directive1′, ‘directive2′, ‘directive3′]aby wymagać kontrolera wielu dyrektyw.
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
}
}
});