3
How can I call a directive, within a second directive?
I have a variable x in directive 1 and I want to access this variable x in a Directive 2 so that I can say that x (diretiva 1) === y (diretiva 2).
3 answers
3
It is not good practice, but you can pass directive 1 as required in 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.
}
});
3
The recommended way is implementing a service that you should inject into the directives/controls where you want to share your variable. (The idea is that you can share the value and control access in a unified way)
A good example can be found in this post of Stack Overflow original.
0
For you to pass values of diretivasFilhas you pass the property to the directive you want and it receives this value, example I am passing the property valor of Directive to the Directivab, because I will reuse what the user entered in this field in another Section of my form.
By doing this I can make any rule without having to create one service for this very reason.
Another observation I am using Angularjs 1.3 and am using controllerAs to ensure the scope, and instead of using $Scope I take John Papa’s approach. (var $ctrl = this;)
/* -- directionA -- */
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]);
});
/* -- directive b -- */
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:
Browser other questions tagged javascript angularjs
You are not signed in. Login or sign up in order to post.
I liked the example. Thank you very much for the explanation. I’m going to try out variations of this Stack Overflow post to see how I can use it in my application.
– Edmo
@Edmo not so, it is a pleasure to help.
– OnoSendai