Q:

How to distinguish between 2 directives

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.

A:

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

});

