I'm using some version of jquery autocomplete as an angularjs direcitve.
When the jquery updates the input's value using element.val()
angular does no notice the change until after the next digest ( i suppose ).
My first thought was to perform the action on the ng-model
post digest using $timeout
but as you can see it didn't help.
My second approach was to override the element's val
function to trigger an input
event but I haven`t managed to make it work.
Try to select a value from the autocomplete list and you'll see that the ng-model above is not updating.
UPDATE
Thanks for the response. I didn't know about the onSelect
option.
This is the code based on your recommendations
// clone user provided options
scope.options = _.extend({}, scope.AutoCompleteOptions());
// Wrap onSelect - Force update before manipulation on ng-model
var fn = _.has(scope.AutoCompleteOptions(), 'onSelect') ? scope.AutoCompleteOptions().onSelect : _.noop;
scope.options.onSelect = function () {
ngModelCtrl.$setViewValue(element.val());
scope.$apply(fn);
};
scope.autocomplete = $(element).autocomplete(scope.options);
This way i maintain the interface of the directive while guarantying that ng-model
will be up to date.
Thanks.
See Question&Answers more detail:os