CODEWITHSUNDEEP
javascriptangularjsbower
therealscifi
therealscifi

Reputation: 382

What's the best way to fix two AngularJS directives with the same name?

I have a project that's getting quite large. My problem is with clashing 3rd party directives because of... unwisely... chosen directive names, i.e. "datepicker."

Since I use bower for dependency management, I don't want to edit any of the libraries because that would break portability.

How has anyone solved this issue?

Upvotes: 3

Views: 197

Answers (1)

Itamar L.
Itamar L.

Reputation: 519

After my comment, I created a plunker to see if this workaround is viable and to see how Angular behaves in the case of name clashing but under different modules:

http://plnkr.co/edit/9JKTEfGG4bu47QQIEhBh?p=preview

It seems that if you use different restrictions for different directives then it does work (you need to use the ones that are not mutual on the different directives).

<!DOCTYPE html>
<html>

  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl as vm">

  <div some-directive></div>
  <some-directive></some-directive>

  <script>
    var myApp2 = angular.module('myApp2',[]);
    myApp2.directive("someDirective", function() {
      return {
        restrict: 'E',
        template: 'inside myApp2'
      };
    });

    var myApp = angular.module('myApp', ['myApp2']);
    myApp.directive("someDirective", function() {
      return {
        restrict: 'A',
        template: 'inside myApp'
      };
    });


  </script>
  </body>

</html>

OUTPUT

inside myApp
inside myApp2

Upvotes: 2

Related Questions