A directive
permite estender o vocabulário HTML de forma declarativa para a construção de componentes da web. O ng-app
atributo é uma diretiva, assim como ng-controller
e todos os ng- prefixed attributes
. Directivas pode ser attributes
, tags
ou mesmo class
names
, comments
.
Como nascem as diretrizes ( compilation
e instantiation
)
Compilar: Usaremos a compile
função manipulate
no DOM antes de ser renderizada e retornaremos uma link
função (que tratará do vínculo para nós). Este também é o lugar para colocar todos os métodos que precisam ser compartilhados com toda instances
essa diretiva.
link: Usaremos a link
função para registrar todos os ouvintes em um elemento DOM específico (clonado no modelo) e configurar nossas ligações para a página.
Se configurados na compile()
função, eles seriam configurados apenas uma vez (que geralmente é o que você deseja). Se definido na link()
função, ele será definido sempre que o elemento HTML for vinculado aos dados no
objeto.
<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
A função retorna a função pre
e post
link. Na função de pré-link, temos o modelo de instância e também o escopo do controller
, mas ainda assim o modelo não está vinculado ao escopo e ainda não possui conteúdo transcluído.
Post
A função de link é onde o link de postagem é a última função a ser executada. Agora o transclusion
está completo,, the template is linked to a scope
e o view will update with data bound values after the next digest cycle
. A link
opção é apenas um atalho para configurar uma post-link
função.
controlador: O controlador de diretiva pode ser passado para outra fase de vinculação / compilação de diretiva. Pode ser injetado em outras diretivas como meio de uso na comunicação entre diretivas.
Você deve especificar o nome da diretiva a ser requerida - ela deve estar vinculada ao mesmo elemento ou a seu pai. O nome pode ser prefixado com:
? – 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.
Use colchete [‘directive1′, ‘directive2′, ‘directive3′]
para exigir várias controladoras de diretivas.
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
}
}
});