Como posso chamar uma diretiva, dentro de uma segunda diretiva?
Eu tenho uma variável x na diretiva 1 e quero acessar essa variável x
numa diretiva 2 para que eu possa dizer que x (diretiva 1) === y (diretiva 2)
.
A maneira recomendada é implementando um serviço que você deve injetar nas diretivas/controles onde deseja compartilhar sua variável. (A idéia é que você possa compartilhar o valor e controlar o acesso de maneira unificada)
Um bom exemplo pode ser encontrado neste post do Stack Overflow original.
Não é uma boa prática, mas você pode passar a diretiva 1 como required na 1
app.directive('directive1', function(){
return { ... }
});
app.directive('directive2', function) {
return {
require: 'directive1',
link: function(scope, elem, attrs, directive1Ctrl /* *** AQUI VAI O CONTROLLER DA DIRETIVA1 ** */) {
// ACESSE A DIRECTIVE 1 PELO QUARTO PARAMETRO PASSADO.
}
});
Para você passar valores de diretivasFilhas
você passa a propriedade para a diretiva que deseja e ela recebe esse valor, exemplo estou passando a propriedade valor
da DiretivaA para a DiretivaB, pois irei reaproveitar o que o usuário inseriu neste campo em outro section do meu form.
Fazendo isso eu posso fazer qualquer regra sem que seja necessário criar um service
propriamente para isto.
Outra observação eu estou usando AngularJs 1.3 e estou usando controllerAs
para garantir o escopo, e ao invés de usar $scope eu faço a abordagem do John Papa. (var $ctrl = this;
)
/* -- diretivaA -- */
define(['initializer', 'myControllerA'], function (myApp) {
function myControllerI(ENV) {
return {
restrict: 'E',
templateUrl: ENV.FRONT_END.BASE_URL + '/' + mytemplateA.html,
controller: 'myControllerA',
controllerAs: '$ctrl',
bindToController: true,
scope: {
name: '=?',
zipcode: '=?',
total: '='
}
};
}
myApp.directive('directiveA', ['ENV', directiveA]);
});
/* -- diretivaB -- */
define(['initializer', 'myControllerB'], function (myApp) {
function myControllerB(ENV) {
return {
restrict: 'E',
templateUrl: ENV.FRONT_END.BASE_URL + '/' + mytemplateB.html,
controller: 'myControllerB',
controllerAs: '$ctrl',
bindToController: true,
scope: {
car: '=?',
model: '=?',
age: '=',
total: '=' // atributo da minha diretivaA.
}
};
}
myApp.directive('directiveB', ['ENV', directiveB]);
});
/* -- Template Pai -- */
<div>
<directive-a
name="$ctrl.name"
zipcode="$ctrl.zipcode"
total="$ctrl.total">
</directive-a>
<directive-b
car="$ctrl.car"
model="$ctrl.model"
age="$ctrl.age"
total="$ctrl.total" (recebendo propriedade da diretivaA)>
</directive-b>
</div>
References: