Question

我正在使用以下依赖项：

angularJS v1.5.5
jquery v1.12.4
jquery-ui v1.12.1
jQuery Autocomplete plugin v1.2.6

然后我按照这样定义指令：

.directive('autoComplete', [
    '$timeout', function($timeout) {
        return function(scope, element, attrs) {
            var auto;
            auto = function() {
                $timeout((function() {
                    if (!scope[attrs.uiItems]) {
                        auto();
                    } else {
                        element.autocomplete({
                            source: [scope[attrs.uiItems]]
                        });
                    }
                }), 0);
            };
            return auto();
        };
    }
])

我从this SO question的答案借来的。自动完成功能大部分工作，但是当我使用键盘移动匹配并按回车键或用鼠标单击匹配时，模型仅使用我键入的部分更新，而不是选择完整项目。我应该在哪里解决这个问题？它是插件中的错误吗？指示？我的输入定义？

$scope.ccyPairs = [ "USDCHF", "CHFUSD", "USDEUR", "EURUSD", "USDGBP", "GBPUSD", "USDJPY", "JPYUSD", "CHFEUR", "EURCHF", "CHFGBP", "GBPCHF", "CHFJPY", "JPYCHF", "EURGBP", "GBPEUR", "EURJPY", "JPYEUR", "GBPJPY", "JPYGBP" ];

<input type="text" auto-complete id="ccyPair" ui-items="ccyPairs" ng-model="ccyPair" />

当我这样做时：

$scope.$watch("ccyPair", function(newValue, oldValue) {
   console.log(newValue);
}, false);

我看到模型仅使用我在输入中输入的部分进行更新，而不是使用列表中的完整选定匹配进行更新，无论是通过鼠标单击选择还是在匹配项中移动并按Enter键。

例如，在下图中，模型仅更新为USD，而不是更新为正确的完整匹配CHFUSD。

Answer 1

在经历了很多痛苦之后，我抓紧了我的工作方式：）

.directive('autoComplete', [
    '$timeout', function($timeout) {
        return {
          require: 'ngModel',
          link: function($scope, element, attrs, ctrl) {
                    var fAutoComplete;
                    fAutoComplete = function() {
                        $timeout(function() {
                            if (!$scope[attrs.uiItems]) {
                                fAutoComplete();
                            } else {
                                element.autocomplete({
                                    source: [$scope[attrs.uiItems]]
                                }).on('selected.xdsoft', function(e, newValue) {
                                    ctrl.$setViewValue(newValue);
                                    $scope.$apply();
                                });
                            }
                        }, 5);
                    };
                    return fAutoComplete();
                }
        };
    }
])

为什么自动填充输入未正确更新模型？

1 个答案: