使用AngularJS的jQuery datepicker:"TypeError:element.datePicker不是函数"

Mar*_*sky 5 jquery jquery-ui datepicker angularjs

我正在尝试在我的AngularJS应用程序中使用jQuery datepicker,但是我收到以下错误消息:

jQuery datepicker with AngularJS: "TypeError: element.datePicker is not a function"
Run Code Online (Sandbox Code Playgroud)

我正在使用这个答案的代码: 与Angularjs的jQuery ui datepicker

这是同一个答案的工作小提琴:http: //jsfiddle.net/kevinj/TAeNF/2/

这是我正在使用的完整代码:

<html>
<head>
    <script src="/js/angular.min.js"></script>
    <script src="/lib/jquery/jquery-1.12.0.min.js"></script>
    <script src="/lib/jquery/jquery-ui-1.11.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/lib/jquery/jquery-ui-1.11.4.min.css">
</head>

<body ng-app="app">

<script>
var datePicker = angular.module('app', []);

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

<p><input type="text" ng-model="date" jqdatepicker></p>
<p>{{ date }}</p>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么?谢谢!

Pan*_*kar 6

当您之前加载 AngularJS 时jQuery,默认情况下将使用jQLite较小的jQueryAngular 内部存在的API。

基本上你需要在 angular js 之前包含 jQuery 才能使用 jQuery在查询 DOM 时默认api。

否则你需要明确使用 $(element)

笔记

确保 jQuery 库版本应该相同,jQuery 和 jQuery.ui 两者。

演示小提琴