CODEWITHSUNDEEP
angularjsangularjs-directive
Stepan Suvorov
Stepan Suvorov

Reputation: 26226

AngularJS - What is expected behaviour of two directives with the same name but in different modules?

Of course, I can check it myself. It's more conceptual/architectural question and why it was build so.

angular.module('appmodule1').directive('mydir', function(){});

angular.module('appmodule2').directive('mydir', function(){});

so what should we expect from mydir?

UPD: dependencies between the modules:

angular.module('app',['appmodule1', 'appmodule2'])

or

angular.module('appmodule1', ['appmodule2']);

Upvotes: 0

Views: 1277

Answers (2)

PSL
PSL

Reputation: 123739

One trivial thing is that if your module only directly/indirectly loads only one of the module then that directive factory only will be used. But if your question is what if both the modules are loaded say for example angular.module('app',['appmodule1', 'appmodule2']) and your application is bootstrapped with the module app then the directive factories will be added together, i.e directive factories are additive and such component when used will render with both the factories.

angular.module('app1', []).directive('mydir', function() {
  return {
    restrict: 'E',
    link: function() {
      console.log("App1");
    }
  }
});

angular.module('app2', []).directive('mydir', function() {
  return {
    restrict: 'E',
    link: function() {
      console.log("App2");
    }
  }
});;
angular.module('app', ['app1', 'app2']).config(function($provide) {
  $provide.decorator('ngRequiredDirective', function($delegate) {
    console.log($delegate); //Check the console on the configuration you will see array of 2 configurations
    return $delegate;
  })
});;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app">
  <mydir></mydir>
  <test ng-required="true"></test>
</div>

Generally the scoping, template etc cannot be specified in both (Rules are same as when an element has more than one directives mentioned) and these kind of directives are generally defined in the same module (or even in a different module) with intend and for special purpose. For example angular internally has a directive with the selector select which works along with ng-options directive, now say in your application you want to convert all the select to a bootstrap select option or with ng-repeated material select. You can abstract them out an still create another directive with the selector select and add your logic to render it by parsing the ng-options expression and render the new dropdown.

An example is within angular itself, the way ng-required and other similar directives are implemented, see this answer for example. You can check it out by doing a console log of ng-required directive factory as below.

.config(function($provide) {
  $provide.decorator('ngRequiredDirective', function($delegate) {
    console.log($delegate); //Check the console on the configuration you will see array of 2 configurations
    return $delegate;
  })
});

Why it was built?

By bet would be on extensibility and dividing different responsibility in different factories.

So in short if at all you have multiple directive factories for the same selector it should not be accidental, but created with clear purpose, otherwise it could turn out to be a disaster!

Upvotes: 1

Ron Brogan
Ron Brogan

Reputation: 901

It will depend under which module the directive is instantiated. If you're under the appmodule1, the corresponding directive would be used. There would be no conflict here, unless I'm missing something.

Upvotes: 0

Related Questions