javascript - Angularjs jquery UI自动完成

Question

我正在尝试在 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);

                }
            });
        }
    };
});

Answer 1

你总是可以利用这些人所做的工作：http: //angular-ui.github.io/bootstrap

-向下滚动到预先输入-

这是一个 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);
                        }
                    });
                }
            });
        }
    };
});