AngularJS UI Datepicker with Bootstrap not working

Question

I'm trying to get a datepicker to work with AngularJS. I'm using jQuery, jQueryUI, Bootstrap and AngularJS in my project. I tried the jQuery UI datepicker but that doesn't seem to work well (not at all) with Angular and it's scope.

I tried many things and my project is probably getting messy adding and removing stuff. I've seen many working examples and I can't figure out what I'm doing wrong in my project. I'm pretty new to Angular, it's the first time I'm using it in a project.

Currently I'm trying to get an angular-ui / bootstrap datepicker to work I found here: http://angular-ui.github.io/bootstrap/

The following is included, in the same order, in the head section. I left out the tags for a better reading, I can guarantee that everything is loaded just fine.

// CSS files
css/bootstrap-custom.min.css
css/myOwnStylesheet.css
css/jquery-ui.css

// JS files
js/jquery.js
js/jquery-ui.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.15/angular-locale_nl-nl.js <- I need this for language specific things, like currency format

js/bootstrap.min.js
js/ui-bootstrap-custom-tpls-0.12.1.js <- I also tried without the tpls
js/myApp.js <- where I start my Angular app
js/ui-datepicker.js <- some code I copy pasted and edited from http://angular-ui.github.io/bootstrap/

I will also post some content of the to my problem important files.

myApp.js

var myApp = angular.module('myApp',['ui.bootstrap']);

ui-datepicker.js (tried a few variations already)

angular.module('myApp').controller('DatepickerController', ['$scope', function ($scope) {
// … lots of stuff here, copy pasted from my source (http://angular-ui.github.io/bootstrap/) and not edited
}]);

ui-bootstrap-custom-tpls-0.12.1.js

angular.module("ui.bootstrap", ["ui.bootstrap.tpls","ui.bootstrap.datepicker","ui.bootstrap.dateparser","ui.bootstrap.position"]);
angular.module("ui.bootstrap.tpls", ["template/datepicker/datepicker.html","template/datepicker/day.html","template/datepicker/month.html","template/datepicker/popup.html","template/datepicker/year.html"]);
angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootstrap.position'])
// … some other untouched code ...

Now for the HTML, I have a ng-app=”myApp” in the html-tag. A working controller (if I don't add the following ng-controller → ) and a ng-controller=”DatepickerController” which gives the following error:

Argument 'DatepickerController' is not a function, got undefined

I hope someone can tell me what I'm doing wrong, my project depends on it!

Answer 1

我觉得你输入代码时迷路了，我不明白你为什么要添加tpls和其他模块，检查这个plunker，保持plunker简单的链接

see the link