Angularjs jquery Autouzupełnianie interfejsu użytkownika

Question

Próbuję zaimplementować autouzupełnianie jquery w Angular dyrektywy. Dane, które otrzymuję dla źródła pochodzą z odpowiedzi websocket. To nie działa i myślę, że opóźnienie odpowiedzi jest przyczyną problemu.

Doceniam, jeśli ktoś może rzucić nieco światła na kod poniżej. Czy istnieje jakaś elegancka technika, aby osiągnąć to za pomocą jakiegoś żądania/odpowiedzi lub obietnicy?

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

Zawsze można wykorzystać pracę tych facetów zrobienia: http://angular-ui.github.io/bootstrap

-scroll do typeahead-

Oto Plunkr: http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=preview

Oto niektóre znaczniki:

HTML

<div class='container-fluid' ng-controller="TypeaheadCtrl"> 
    <pre>Model: {{selected| json}}</pre> 
    <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> 
</div> 

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']; 
} 

Aktualizacja

Wydaje się jakbym skupiając się na niewłaściwym problemu. Spróbuj przenieść wywołanie funkcji autouzupełniania wewnątrz programu obsługi $on.

Jak to:

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); 
         } 
        }); 
       } 
      }); 
     } 
    }; 
});