使用 Angular 指令绑定 datepicker

Question

所以，我创建了一个真正适用于此的 JSFiddle：

Working example

var datePicker = angular.module('JBenchApp', []);

datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});

但是当我将它移到我的应用程序中时，它不能使用完全相同的代码。

一些背景：

1. 我的 HTML 标记中有一个 ng-app="JBenchApp"。

2. 我已经在 index.html 文件的头部声明了指向 JQuery、JQuery-UI 和 Angular 的链接

3. 我有一个 calendar.html 文件，它是使用角度路由和 ng-view 指令显示的部分文件。这有标签：

所有都正确显示并且 onLoad 我可以看到该指令已绑定。然后我点击日期选择器，没有任何反应。控制台中也没有出现错误。

上面 JSFiddle 中的所有内容都有效。我已经将它完全复制到我的代码中，但它不起作用。我做错了什么？

编辑以包含头脑中的内容：

 <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/app.js"></script>
    <script src="js/bootstrap.js"></script>

Answer 1

嗯，在盯着这段代码，盯着这段代码之后，我很震惊。该指令被命名为 jqdatepicker 并且对该指令的调用是 jdatepicker（没有“q”）。呵呵！