Yilong Yilong - 13 days ago 12
AngularJS Question

element.trigger() not working in IE

I implemented jQuery autocomplete with AngularJS.

app.directive("autoComplete", function ($timeout) {
return {
restrict: "A",
link: function (scope, element) {
var location = ["OMAHA, NE", "OMAHA, TX", "DALLAS, TX", "DALLAS, NE"];

element.autocomplete({
source: location,
autoFocus: true,
delay: 0,
minLength: 3,
select: function () {
$timeout(function () {
element.trigger("input");
}, 0);
}
});
}
}
});


Before, autocomplete value selected from dropdown could not be passed to
ngModel
(JSFiddle example). Then I added
element.trigger("input");
, and everything works fine (in Chrome or Firefox).

However, the problem still exists in IE (I am using IE 11). When autocomplete value selected from dropdown using "Enter" or "Left Click" or "Tab", it cannot be passed to
ngModel
. So the reason is
element.trigger("input");
somehow not working in IE.

Any help is appreciated. Thanks!

Answer

The solution is:

select: function() {
    $timeout(function() {
        //Assign the selcted value to ngModel: scope.<ngModelValue> = <selectedValue>;
    }, 0);
}