为什么 jsFiddle 上的 AngularJS 指令找不到 jQuery-UI？

Question

我正在尝试获取使用 jQuery-UI 在 jsfiddle 中工作的 AngularJS 指令。

jQuery-UI直接使用就可以了
AngularJS 有效
但指令报告："element.datepicker is not a function"

我需要做什么才能让 jQuery-UI 在 jsFiddle 的指令中工作？

http://jsfiddle.net/edwardtanguay/oqo2xv3e/1

HTML

<div ng-app="mainApp">
    <div ng-controller="mainController">
        <div>{{message}}</div>
        <input id="normal" type="text" />
        <input id="startDate" type="text" ng-model="date" jqdatepicker />
    </div>
</div>

JavaScript

angular.module('mainApp', [])
.controller('mainController', function($scope) {
    $scope.message = 'test111';
    $('#normal').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();
                }
            });
        }
    };
});

Answer 1

只需用 $()..

包裹你的指令

因为 jQuery 在 angular 之后加载所以默认情况下 angular 选择 jqLite。

或首先在脚本标记 angularjs 中加载 jQuery.. 您从 fiddle 中的默认库 select angular 并添加 jQuery 作为外部。

$(element).datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });

为什么 jsFiddle 上的 AngularJS 指令找不到 jQuery-UI？

Why can this AngularJS directive on jsFiddle not find jQuery-UI?

angularjs

jquery-ui

jsfiddle