Проблемы с автозаполнением jQuery + AngularJS

Я использую AjgularJS на своей странице и хочу добавить поле для использования автозаполнения из jqueryui, и автозаполнение не вызывает вызов ajax.

Я протестировал script на странице без angular (ng-app и ng-controller), и он работает хорошо, но когда я помещаю script на страницу с угловыми функциями, она перестает работать.

любая идея?

jquery script:

$(function () {

    $('#txtProduct').autocomplete({
        source: function (request, response) {

            alert(request.term);

        },
        minLength: 3,
        select: function (event, ui) {

        }
    });

});
  • Интересное примечание: когда я вызываю script в инспекторе Chrome, автозаполнение начинает работать!!!
  • Версии: AngularJS: 1.0.2 - JqueryUI: 1.9.0

ВЫВОД: Виджет автозаполнения из jQueryUI должен быть инициализирован изнутри пользовательской директивы AngularJS в качестве примера:

Разметка

<div ng-app="TestApp">
    <h2>index</h2>
    <div ng-controller="TestCtrl">

        <input type="text" auto-complete>ddd</input>

    </div>
</div>

Angular script

<script type="text/javascript">

    var app = angular.module('TestApp', []);

    function TestCtrl($scope) { }

    app.directive('autoComplete', function () {
        return function postLink(scope, iElement, iAttrs) {

            $(function () {
                $(iElement).autocomplete({
                    source: function (req, resp) {
                        alert(req.term);
                    }
                });
            });

        }
    });

</script>

Ответы

Ответ 1

Возможно, вам просто нужно сделать это с помощью "angular", то есть использовать директиву для настройки ваших элементов DOM и привязки событий, использовать службу для получения ваших данных и использовать контроллер, чтобы сделать свою бизнес-логику... все, используя при этом уровень полезности вложения, Angular...

Служба для получения ваших данных автозаполнения...

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {
            //this is where you'd set up your source... could be an external source, I suppose. 'something.php'
            return ['apples', 'oranges', 'bananas'];
        }
    }
}]);

директива для работы с настройкой плагина автозаполнения.

app.directive('autoComplete', function(autoCompleteDataService) {
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
                    // elem is a jquery lite object if jquery is not present,
                    // but with jquery and jquery ui, it will be a full jquery object.
            elem.autocomplete({
                source: autoCompleteDataService.getSource(), //from your service
                minLength: 2
            });
        }
    };
});

И используя его в вашей разметке... обратите внимание на ng-модель, чтобы установить значение в области $с тем, что вы выбрали.

<div ng-controller="Ctrl1">
    <input type="text" ng-model="foo" auto-complete/>
    Foo = {{foo}}
</div>

Это просто основы, но, надеюсь, это помогает.

Ответ 2

Мне пришлось сделать немного больше работы, чтобы получить эту работу, используя службу $http.

Услуга:

app.factory("AutoCompleteService", ["$http", function ($http) {
    return {
        search: function (term) {
            return $http.get("http://YourServiceUrl.com/" + term).then(function (response) {
                return response.data;
            });
        }
    };
}]);

Директива:

app.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) {
    return {
        restrict: "A",
        link: function (scope, elem, attr, ctrl) {
            elem.autocomplete({
                source: function (searchTerm, response) {
                    AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) {
                        response($.map(autocompleteResults, function (autocompleteResult) {
                            return {
                                label: autocompleteResult.YourDisplayProperty,
                                value: autocompleteResult 
                            }
                        }))
                    });
                },
                minLength: 3,
                select: function (event, selectedItem) {
                    // Do something with the selected item, e.g. 
                    scope.yourObject= selectedItem.item.value;
                    scope.$apply();
                    event.preventDefault();
                }
            });
        }
    };
}]);

html:

<input ng-model="YourObject" autocomplete />