This reference helps a lot in making directive "autocomplete" with tag . Problems with jQuery autocomplete + AngularJS
However, I have a following problem:
I know in order to handle events after a selection in autocomplete list, should use event handler provided by jqueryUI.
...
link: function(scope, elem, attr, ctrl) {
elem.autocomplete({
source: datasource,
select: function( event, ui ) {
console.log(ui.item.value);
console.log(attrs.ngModel);
//but how can I change the value of this ngModel in scope?
}
});
};
However, in directive, how can I affect the value of that ngModel? I can get the name of that ngModel by using attrs.ngModel.(knowing that ng-model's name is dynamic and I can get the value by using ui.item.value)
Does anyone got some idea? Great thanks in advance!
Not sure if you already have the scope defined in your directive but here's a example:
myApp.directive("myDirective", function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '='
},
link: function(scope, element, attrs) {
// monitor plugin and set value to ngModel
element.plugin({
onChange: function(newValue) {
scope.$apply(function() {
scope.ngModel = newValue;
});
}
});
// monitor ngModel and set new value to element/plugin
scope.$watch('ngModel', function(newValue, oldValue) {
element.val(newValue);
});
}
};
});
OK, after playing with this example for a few hours (I'm just learning angular) I figured that to set the value you need following:
ngModel.$setViewValue(elm.val());
In particular your code should look like this:
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
elem.autocomplete({
source: datasource,
select: function( event, ui ) {
console.log(ui.item.value);
console.log(attrs.ngModel);
ctrl.$setViewValue(elem.val());
//but how can I change the value of this ngModel in scope?
}
});
};
So I tested this it works.