angularjs - ng-model is not updating when using jquery element.val() -
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
Post a Comment