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

Question

I am trying to get an AngularJS directive that uses jQuery-UI to work in jsfiddle.

jQuery-UI works fine when used directly
AngularJS works
but the directive reports: "element.datepicker is not a function"

What do I need to do to get jQuery-UI to work inside the directive in 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();
                }
            });
        }
    };
});

marc_s · Accepted Answer · 2016-01-01 10:18:00Z

1

Just wrap your directive with $()..

Because jQuery loads after angular so by default angular picks jqLite.

or loads jQuery first in script tag the angularjs.. you select angular from default lib in fiddle and add jQuery as external.

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

edited Jan 1, 2016 at 10:18

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 3, 2015 at 16:43

Akshay Dhankhar

2741 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related