Автозаполнение пользовательского автозавершения Angularjs jquery

Я пытаюсь реализовать автозаполнение 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);

                }
            });
        }
    };
});

ОТВЕТЫ

Ответ 1

Вы всегда можете использовать работу, которую эти парни сделали: http://angular-ui.github.io/bootstrap

-Scroll down to 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);
                        }
                    });
                }
            });
        }
    };
});