Question

所以，我创建了一个实际上适用于此的JSFiddle：

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();
                }
            });
        }
    };
});

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

一些背景知识：

我的HTML标记中有一个ng-app =“JBenchApp”。
我在index.html文件的头部声明了我对JQuery，JQuery-UI和Angular的链接
我有一个calendar.html文件，它是使用angular routing和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”）。卫生署！

绑定datepicker与Angular指令

1 个答案: