AngularJS - jQuery UI - binding issue

Question

I am currently porting a large application over to a HTML5 based web app - I have started building the app in AngularJS and enjoying the power of the AngularJS framework - I have one issue standing in my way currently:

I have a directive that gives me a jQuery Datepicker however the binding to the model does not seem to be working.

http://jsfiddle.net/9BRNf/

I am probably misunderstanding the way directives work and would like to see if I can patch this part of my understanding of the framework. I have gone through loads of examples (including the angularui project on github but still not making sense of why the binding is not happening)

any assistance will be greatly appreciated.

Answer 1

For those Googling this issue (as I was), a simpler way of tying in the jQuery UI datepicker with Angular is to do this...

$.datepicker.setDefaults({
    // When a date is selected from the picker
    onSelect: function(newValue) {
        if (window.angular && angular.element)
            // Update the angular model
            angular.element(this).controller("ngModel").$setViewValue(newValue);
    }
});

Just place it prior to your .datepicker() initialisation code.

(Taken from another answer I posted here: https://stackoverflow.com/a/17206242/195835)

Answer 2

First off, it's great that you are using angularjs, its a sweet framework. An offshoot project was started awhile back to deal with things like wrapping jquery-ui and creating ui modules.

Below is link to Peter Bacon Darwin's implementation.

https://github.com/angular-ui/angular-ui/tree/master/modules/directives/date

--dan