Angularjs jquery UI自动完成

我正在尝试在Angular指令中实现jquery的自动完成。 我收到的源数据来自websocket响应。 它不起作用，我认为响应延迟导致了这里的问题。

如果有人能够对下面的代码有所了解，我将不胜感激。 是否有任何优雅的技术来实现这一点使用某种请求/响应或承诺？

app.directive('autoComplete', function($rootScope, locationAutoCompleteService, $timeout, $http, programLocationModel ) { return { restrict: 'A', scope: { serviceType: '@serviceType' }, link: function(scope, elem, attr, ctrl) { var autoItem = []; scope.change = function () { locationAutoCompleteService.unSubscribe(); var service = locationAutoCompleteService.getServiceDefinition(); service.filters.pattern = scope.inputVal; locationAutoCompleteService.subscribe(); }; scope.$on('myData', function(event, message){ if ( message !== null && message.results !== null) { autoItem = []; for ( var i = 0; i < message.results.length; i++) { autoItem.push({ label: message.results[i].name, id: message.results[i].id }); } } }); elem.autocomplete({ source: autoItem, select: function( event, ui ) { $timeout(function() { elem.trigger('input'); }, 0); } }); } }; }); 

Answer 1

你总是可以利用这些人所做的工作： http ： //angular-ui.github.io/bootstrap

– 向下滚动到typeahead-

这是一个Plunkr： http ：//plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv？p = preview

这是一些标记：

HTML

 
 
Model: {{selected| json}}
  
 
  JS 
 function TypeaheadCtrl($scope) { $scope.selected = undefined; $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; } 
  更新 
 好像我在关注错误的问题。 尝试在$on处理程序中移动自动完成调用。 
 像这样： 
 app.directive('autoComplete', function($rootScope, locationAutoCompleteService, $timeout, $http, programLocationModel) { return { restrict: 'A', scope: { serviceType: '@serviceType' }, link: function(scope, elem, attr, ctrl) { var autoItem = []; scope.change = function() { locationAutoCompleteService.unSubscribe(); var service = locationAutoCompleteService.getServiceDefinition(); service.filters.pattern = scope.inputVal; locationAutoCompleteService.subscribe(); }; scope.$on('myData', function(event, message) { if (message !== null && message.results !== null) { autoItem = []; for (var i = 0; i < message.results.length; i++) { autoItem.push({ label: message.results[i].name, id: message.results[i].id }); } elem.autocomplete({ source: autoItem, select: function(event, ui) { $timeout(function() { elem.trigger('input'); }, 0); } }); } }); } }; });