Can one directive have different names in angularjs?

Question

I'm having two directives with same functionality like below.

angular.module('ui.directives', [])
  .directive('uiFoo', 
    function() {
      return {
        restrict: 'EAC',
        link: function($scope, element, attrs) {
          //to do functionality
          element.append("test content");
        }
       };
    })
  .directive('uiFoo1', 
    function() {
      return {
        restrict: 'EAC',
        link: function($scope, element, attrs) {
          //to do functionality
          element.append("test content");
        }
      };
    });

They both contain the same working like here it is appending "test content" as text to that element. Is there any chance that instead making this two directive. Can i write two names for one directive/ I can use same functionality in with optimize code. Here I'm writing same code for without any meaning. Instead of writing directive two times, is there any optimize way. I'm new in AngularJS kindly help me. Thanks in advance!

Why can't you doit in the same directive making it more configurable? — PSL
– PSL, Commented Aug 20, 2014 at 18:47
I'm confused, do you want both directives to do exactly the same? — ivarni
– ivarni, Commented Aug 20, 2014 at 18:48
@PSL i want to apply directive for input and select element.and both wil have same functionality..then how should achieve it? — Pankaj Parkar
– Pankaj Parkar, Commented Aug 20, 2014 at 18:50
@pankajparkar You can do away with just one directive. What exactly are you doing in the directive(s)? — PSL
– PSL, Commented Aug 20, 2014 at 18:55

Pr0gr4mm3r · Accepted Answer · 2014-08-20 19:21:04Z

7

The simpliest way would be to extract your directive into a JS object and use this instead.

Alternativly you can provide the directive object with a angular provider, if you want to stay in the angular context.

But, why do you want to have two directives with the exact same functionality in the first place?
Directives can used as often as you want, so this seems like a design flaw to me.

var myDirective = [function(){
            restrict: 'EAC',
            link: function($scope, element, attrs) {
              //to do functionality
              element.append("test content");
            }
          }];

angular.module('ui.directives', [])
      .directive('uiFoo', myDirective)
      .directive('uiFoo1', myDirective);

edited Aug 20, 2014 at 19:21

answered Aug 20, 2014 at 18:50

Pr0gr4mm3r

6,2401 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

trey-jones Over a year ago

Why not set myDirective = function()... Then, if you need to inject dependencies, you only have to do it once. Note that to be minifiable, you would return an array eg. myDirective = ['$http', function($http)...]

Pr0gr4mm3r Over a year ago

Of course you can extract the whole function too. I'll change the answer accordingly.

Collectives™ on Stack Overflow

Can one directive have different names in angularjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related