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

                }
            });
        }
    };
});

您始终可以利用这些人所做的工作：http://angular-ui.github.io/bootstrap http://angular-ui.github.io/bootstrap

-向下滚动到预先输入-

这是一个笨蛋：http://plnkr.co/edit/9zsrvLLfH8hKGwmIeZVv?p=preview 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'];
}

Update

看来我关注的是错误的问题。尝试将自动完成调用移至$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);
                        }
                    });
                }
            });
        }
    };
});