jquery - 使用 jquery element.val() 时 ng-model 不会更新

Question

PLUNKR example here

我正在使用某些版本的 jquery 自动完成作为 angularjs 指令。 当 jquery 使用 element.val() 更新输入的值时，Angular 直到下一个摘要之后才注意到更改(我想)。

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

我的第二种方法是重写元素的 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);

这样我就可以维护指令的接口(interface)，同时保证 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);
        }
    }
});