How to distinguish between 2 directives
Question
I am looking at angular and i found directives very impressive feature of Angular js.
Here i am having one question --
Suppose i have 2 directives that are doing similar kind of work. for example i have 2 directives that add 1 subsection in an existing section and another directive is also doing same thing for other section. Now for these 2 directives i need to maintain 2 directives that will work on 2 different button clicks.
I need to know if i can have 1 directive that will work on the basis of button click and add subsection in a section whose button was clicked.
for reference please see below code.
To add two different buttons
mainApp.directive("addeducation", function(){
return {
restrict: "E",
template: "<a href='' addedu>Click to add more sections</a>"
}
});
mainApp.directive("addexperience", function(){
return {
restrict: "E",
template: "<a href='' addexp>Click to add more sections</a>"
}
});
Two Directives to work on two different button press--
mainApp.directive("addedu", function($compile){
return function(scope, element, attrs){
element.bind("click", function(){
angular.element(document.getElementById('moreeducation')).append($compile("<edu-Info></edu-Info>")(scope));
});
};
});
mainApp.directive("addexp", function($compile){
return function(scope, element, attrs){
element.bind("click", function(){
angular.element(document.getElementById('moreexperience')).append($compile(" <experience></experience>")(scope));
});
};
});
I want something like this :
mainApp.directive("addedu", function($compile){
return function(scope, element, attrs){
if(button1 clicked){
then add section in experience section
}
else{
add section in education section.
}
}
If somebody has already faced similar problem he/she can help. I need to implement this since i dont want duplicate code.
2 answers
solution1
2 ACCPTED 2016-03-07 12:35:46
You can use directive attributes for differentiating two directives. See below
In your template
<body ng-app="myApp">
<div>Education: <add add-type = "edu"></add></div>
<div>Experience: <add add-type = "exp"></add></div>
</body>
and in your js
myApp.directive("add", function($compile){
return {
restrict: "E",
template: "<a href=''>Click to add more sections</a>",
link: function(scope, element, attrs)
{
element.bind('click', function()
{
if(attrs.addType === 'edu')
element.prepend($compile("<edu-Info>Add edu</edu-Info>")(scope));
else if(attrs.addType === 'exp')
element.prepend($compile("<experience>Add exp</experience>")(scope));
})
}
}
});
solution2
0 2016-03-07 12:38:04
this really sounds like a very bad idea, because what you do is couple your directive to its context (the directive knowing about "button 1" and "button 2") this clearly isn't a very good approach. what you could do in the case you described is adding a reference to a variable to the button using the directive. so for example
"<a href='' addedu="correspondingSection">Click to add more sections</a>
and then add the value to the given "section" variable (correspondingSection). this way your directive stays generic and context insensitive
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.