使用jquery element.val()时ng-model没有更新

Question

这里有PLUNKR的例子

我正在使用某种版本的jquery自动完成作为angularjs direcitve.当jquery使用element.val()angular 更新输入值时,直到下一个摘要(我想)之后才会注意到更改.

我的第一个想法是ng-model使用post digest 执行操作$timeout但是你可以看到它没有帮助.

我的第二种方法是覆盖元素的val函数以触发input事件,但我还没有设法让它工作.

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

UPDATE

谢谢你的回复.我不知道这个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

正如您已经知道的那样,问题是angular不知道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);
        }
    }
});