What's the best way to fix two AngularJS directives with the same name?
Question
I have a project that's getting quite large. My problem is with clashing 3rd party directives because of... unwisely... chosen directive names, ie "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?
1 answers
solution1
2 ACCPTED 2015-08-10 23:06:46
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.