Angularjs jquery UI autocomplete

Question

jquery의 자동 완성을 Angular 지시어로 구현하려고합니다. 소스에 대해받는 데이터는 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

-Scroll 아래로 여기

을 typeahead- 할을하는 Plunkr : 여기

http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=preview 어떤 마크 업입니다 :

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

업데이트 내가 틀린 문제에 국한 된 것 같다

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