angularjs - ng-model is not updating when using jquery element.val() -


plunkr example here

i'm using version of jquery autocomplete angularjs direcitve. when jquery updates input's value using element.val() angular no notice change until after next digest ( suppose ).

my first thought perform action on ng-model post digest using $timeout can see didn't help.

my second approach override element's val function trigger input event haven`t managed make work.

try select value autocomplete list , you'll see ng-model above not updating.

update

thanks response. didn't know onselect option.

this code based on 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 maintain interface of directive while guarantying ng-model date.

thanks.

as knew, problem angular doesn't aware of update made jquery plugin. luckily, can use plugin's onselect callback update ngmodel, this:

.directive("autocomplete", function() {     return {         restrict: "a" ,          require: 'ngmodel', // require ngmodel controller         scope: {             autocompleteoptions : "=autocompleteoptions", // use '=' instead of '&'         },         link: function (scope, element, attrs, ngmodelctrl) {              // prevent html5/browser auto completion             attrs.$set('autocomplete','off');              // add onselect callback update ngmodel             scope.autocompleteoptions.onselect = function() {                 scope.$apply(function() {                     ngmodelctrl.$setviewvalue(element.val());                 });             };              scope.autocomplete = $(element).autocomplete(scope.autocompleteoptions);         }     } }); 

Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -