Angularjs jquery UI otomatik tamamlama

Question

jquery'nin otomatik tamamlamasını Angular yönergesinde uygulamaya çalışıyorum. Kaynak için aldığım veriler web sohbeti yanıtından geliyor. Çalışmıyor ve cevabın gecikmesine neden olduğunu düşünüyorum.

Birisi aşağıdaki kodda biraz ışık tutabilirse memnun olurum. Bunu bir tür istek/cevap veya vaat kullanarak elde etmek için herhangi bir zarif teknik var mı?

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

Hep bu adamlar yapmış çalışmayı kaldıraç olabilir: http://angular-ui.github.io/bootstrap

-Scroll aşağı İşte

typeahead- olan bir Plunkr: Burada

http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=preview bazı biçimlendirme geçerli:

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

Güncelleme Yanlış sorun odaklanan gibi görünüyor

. Otomatik tamamlama çağrısını $on işleyicisinin içinde hareket ettirmeyi deneyin.

Bunun gibi

: yanıtlamak üzere

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