为什么自动完成输入未正确更新模型？

我正在使用以下依赖项：

• angularJS v1.5.5
• jquery v1.12.4
• jquery-ui v1.12.1
• jQuery 自动完成插件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(); }; } ]) 

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

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

当我做：

 $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(); } }; } ])