A directive
vous permet d'étendre le vocabulaire HTML de manière déclarative pour créer des composants Web. L' ng-app
attribut est une directive, tout comme le sont ng-controller
tous les ng- prefixed attributes
. Les directives peuvent être attributes
, tags
ou même class
names
, comments
.
Comment naissent les directives ( compilation
et instantiation
)
Compiler: nous utiliserons la compile
fonction à la fois dans manipulate
le DOM avant son rendu et retournerons une link
fonction (qui gérera la liaison pour nous). C’est aussi l’endroit où mettre toutes les méthodes qui doivent être partagées avec tous lesinstances
de cette directive.
lien: Nous utiliserons la link
fonction pour enregistrer tous les écouteurs sur un élément DOM spécifique (qui est cloné à partir du modèle) et configurer nos liaisons à la page.
S'ils compile()
étaient définis dans la fonction, ils n'auraient été définis qu'une seule fois (ce qui est souvent ce que vous voulez). S'ils link()
étaient définis dans la fonction, ils le seraient à chaque fois que l'élément HTML est lié aux données de l'
objet.
<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
renvoie la fonction pre
et la post
liaison. Dans la fonction de pré-lien, nous avons le modèle d'instance et également la portée de lacontroller
, mais le modèle n'est pas lié à la portée et n'a toujours pas de contenu transclu.
Post
la fonction de lien est l'endroit où le lien de publication est la dernière fonction à exécuter. Maintenant, le transclusion
est terminé the template is linked to a scope
, et le view will update with data bound values after the next digest cycle
. L' link
option n'est qu'un raccourci pour configurer une post-link
fonction.
contrôleur: Le contrôleur de directive peut être passé à une autre phase de liaison / compilation de directive. Il peut être injecté dans d'autres directions comme moyen à utiliser dans la communication inter-directive.
Vous devez spécifier le nom de la directive à exiger - Elle doit être liée au même élément ou à son parent. Le nom peut être préfixé avec:
? – 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.
Utilisez un crochet [‘directive1′, ‘directive2′, ‘directive3′]
pour exiger un contrôleur à directives multiples.
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
}
}
});