使用jquery element.val（）时ng-model不更新

Question

这里的PLUNKR示例

我正在使用某种形式的jquery autocomplete作为angularjs
direcitve。当jquery使用element.val()angular 更新输入的值时，直到下一个摘要（我想）之后才注意到更改。

我的第一个想法是使用来对ng-model后摘要执行操作，$timeout但是如您所见，它没有帮助。

我的第二种方法是重写该元素的val功能以触发input事件，但是我没有设法使其起作用。

尝试从自动完成列表中选择一个值，您会看到上面的ng-model没有更新。

更新

感谢您的回复。我不知道该onSelect选项。

这是基于您的建议的代码

// 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);

这样，我ng-model可以在保证最新的同时维护指令的接口。

谢谢。

Answer 1

如您所知，问题是有角度的人不知道jquery插件所做的更新。幸运的是，您可以使用插件的onSelect回调来更新ngModel，如下所示：

.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 to update ngModel
            scope.AutoCompleteOptions.onSelect = function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(element.val());
                });
            };

            scope.autocomplete = $(element).autocomplete(scope.AutoCompleteOptions);
        }
    }
});