Question

我正在寻找角度，我发现指令非常令人印象深刻的Angular js。

我在这里有一个问题 -

假设我有2个指令正在进行类似的工作。例如，我有2个指令在现有部分中添加1个子部分，而另一个指令也对其他部分执行相同的操作。现在对于这两个指令，我需要维护2个指令，这些指令将适用于2个不同的按钮点击。

我需要知道我是否可以在按钮点击的基础上使用1个指令，并在单击按钮的部分中添加子部分。

供参考，请参阅以下代码。

添加两个不同的按钮

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>"
    }
  });

两个指令可用于两个不同的按钮 -

  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));
       });
       };
    });

我想要这样的事情：

 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.
     }
  }

如果某人已经遇到过类似的问题，他/她可以提供帮助。我需要实现这个，因为我不想要重复的代码。

Answer 1

您可以使用指令属性来区分两个指令。见下文

在您的模板中

<body ng-app="myApp">  
    <div>Education:  <add add-type = "edu"></add></div>
    <div>Experience: <add add-type = "exp"></add></div>
</body>

并在您的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));
        })
    }
}

}）;

Answer 2

这听起来确实是一个非常糟糕的主意，因为你所做的就是将你的指令与其背景相结合（指令知道＆＃34;按钮1＆＃34;以及＆＃34;按钮2＆＃34;）这显然不是一个非常好的方法。在您描述的情况下，您可以执行的操作是使用指令向按钮添加对变量的引用。所以例如

"<a href='' addedu="correspondingSection">Click to add more sections</a>

然后将值添加到给定的＆＃34;部分＆＃34;变量（对应的部分）。这样你的指令保持通用和上下文不敏感

如何区分2个指令

2 个答案: