angular-bootstrap3-datepicker conficts with angular-ui-bootstrap

Hi,

It seems there is a conflict between angular-bootstrap3-datepicker datepicker directive and the one present in angular-ui-bootstrap

I have created a simple test in order to show this problem:

. ├── css │ ├── angular-bootstrap3-datepicker.css │ └── bootstrap.min.css ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff ├── js │ ├── angular-bootstrap3-datepicker.js │ ├── angular.min.js │ ├── jquery.js │ ├── moment.min.js │ └── ui-bootstrap-0.11.0.min.js ├── test.html └── test.js

test.html

<!DOCTYPE html> <html lang="en" ng-app="test"> <head> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/angular-bootstrap3-datepicker.css" /> <script src="js/jquery.js"></script> <script src="js/angular.min.js"></script> <script src="js/ui-bootstrap-0.11.0.min.js"></script> <script src="js/moment.min.js"></script> <script src="js/angular-bootstrap3-datepicker.js" charset="utf-8"></script> <script src="test.js"></script> </head> <body> <div> <div data-ng-controller="AppCtrl"> <datepicker id="date" date-format="YYYY-MM-DD"/> </div> </div> </body> </html>

test.js

app = angular.module('test', ['ui.bootstrap','ng-bootstrap3-datepicker']); app.controller('AppCtrl', function($scope){ console.log("Controller loaded"); });

Notice that I have included ui.bootstrap as a dependency on the test

As you can see in the following image, when the page is loaded it fails with two somewhat cryptic error messages:

However, by changing the name of the directive to something else (i.e. from datepicker to datepicker2)

$ diff -ur old/ new/

diff -ur old/js/angular-bootstrap3-datepicker.js new/js/angular-bootstrap3-datepicker.js --- old/js/angular-bootstrap3-datepicker.js 2014-06-26 11:43:16.000000000 +0200 +++ new/js/angular-bootstrap3-datepicker.js 2014-06-26 12:13:19.000000000 +0200 @@ -30,7 +30,7 @@ dp = angular.module('ng-bootstrap3-datepicker', []); -dp.directive('datepicker', function($compile) { +dp.directive('datepicker2', function($compile) { return { restrict: 'E', replace: true, diff -ur old/test.html new/test.html --- old/test.html 2014-06-26 12:18:33.000000000 +0200 +++ new/test.html 2014-06-26 12:17:14.000000000 +0200 @@ -20,7 +20,7 @@ <div> <div data-ng-controller="AppCtrl"> - <datepicker id="date" date-format="YYYY-MM-DD"/> + <datepicker2 id="date" date-format="YYYY-MM-DD"/> </div> </div>

it works like a charm:

AngularJS definitions naming collisions is a known problem and, as far as I know, the preferred way to avoid this problem is by using a namespace.

benzen / angular-bootstrap3-datepicker

angular-bootstrap3-datepicker conficts with angular-ui-bootstrap #1