Question

以下是jsFiddle的完整示例： http://jsfiddle.net/m5Lgu/

以下是dircetive的代码：

app.directive('autoComplete', function() {
    return {
        scope: { 'uiSrc': '@' },
        require: "ngModel",
        link: function(scope, el, attrs, ngModelCtrl) {
            el.autocomplete({
                source: opts,
                select: function(event, ui) {
                    event.preventDefault();
                    el.val(ui.item.label);
                    scope.$apply(function() {  ngModelCtrl.$setViewValue(el.val())  });
                }
            });
        }
    };
});

使用指令：

<input type="text" auto-complete ng-model="view.fld" autocomplete="off" size="28">

预计fld字段在点击时会被设置为自动填充建议值，但实际上这不会发生。

Answer 1

我不是这方面的专家，但我有两点建议。您正在处理isolated scope问题。我希望我可以解释为什么，但我会更加谨慎地推迟。

从您的指令中删除scope: {}。（可能不是正确的电话）。
直接使用ngModel并进行设置。 Sample fiddle（您的jquery-ui无法正常运行版本不匹配）

link: function (scope, el, attrs, ngModelCtrl) {
    scope: {
      'uiSrc': '@',
      'ngModel': '='
    },
    el.autocomplete({
      ...
      select: function (event, ui) {
                event.preventDefault();
                el.val(ui.item.label);
                scope.$apply(function () {
                    //debugger
                    scope.ngModel = el.val();
                    //ngModelCtrl.$setViewValue(el.val()) 
                });
  }

Answer 2

在 view.fld 之前添加 $ parent。，因为您的指令具有自己的隔离范围。

<input type="text" data-auto-complete="" data-ng-model="$parent.view.fld" autocomplete="off" size="28" />

ng-model没有用$ setViewValue更新（采用jquery-ui自动完成）

2 个答案: