如何区分2个指令
[英]How to distinguish between 2 directives
问题描述
I am looking at angular and i found directives very impressive feature of Angular js.
我正在研究 angular，我发现指令是 Angular js 非常令人印象深刻的特性。
Here i am having one question --我有一个问题——
Suppose i have 2 directives that are doing similar kind of work.假设我有 2 个指令在做类似的工作。 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.例如，我有 2 个指令在现有部分中添加 1 个小节，另一个指令也在其他部分做同样的事情。 Now for these 2 directives i need to maintain 2 directives that will work on 2 different button clicks.现在对于这 2 个指令，我需要维护 2 个指令，这些指令将适用于 2 次不同的按钮点击。
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.我需要知道我是否可以有 1 个指令可以在按钮单击的基础上工作，并在单击按钮的部分中添加小节。
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 个解决方案
解决方案1
2 已采纳 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在你的 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));
})
}
}
}); });
解决方案2
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.这听起来确实是一个非常糟糕的主意，因为您所做的是将指令与其上下文（指令知道“按钮 1”和“按钮 2”）结合起来，这显然不是一个很好的方法。 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).然后将值添加到给定的“section”变量（correspondingSection）。 this way your directive stays generic and context insensitive这样你的指令保持通用和上下文不敏感
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.