Problèmes avec jQuery autocomplete + AngularJS

J’utilise AjgularJS sur ma page et je souhaite append un champ à utiliser la saisie semi-automatique à partir de jqueryui et la saisie semi-automatique ne déclenche pas l’appel ajax.

J’ai testé le script sur une page sans angular (ng-app et ng-controller) et cela fonctionne bien, mais lorsque je mets le script sur une page avec angularjs, il ne fonctionne plus.

une idée?

jquery script:

$(function () { $('#txtProduct').autocomplete({ source: function (request, response) { alert(request.term); }, minLength: 3, select: function (event, ui) { } }); });

note intéressante: quand j’appelle le script sur l’inspecteur de Chrome l’auto-complétion commence à fonctionner !!!
Versions: AngularJS: 1.0.2 – JqueryUI: 1.9.0

CONCLUSION: Le widget autocomplete de jQueryUI doit être initialisé à l’intérieur d’une directive personnalisée d’AngularJS, comme dans l’exemple:

Balisage

  index
  ddd

Écriture angular

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

Peut-être devez-vous simplement le faire de manière “angular” … c’est-à-dire utiliser une directive pour configurer vos éléments DOM et faire des liaisons d’événements, utiliser un service pour obtenir vos données et utiliser un contrôleur pour gérer votre entreprise logique … tout en tirant parti de la bonté angular de la dépendance à l’injection …

Un service pour récupérer vos données à complétion automatique …

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

une directive pour effectuer le travail de configuration du plugin autocomplete.

 app.directive('autoComplete', function(autoCompleteDataService) { return { ressortingct: '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 }); } }; });

Et en l’utilisant dans votre balisage …, notez au modèle ng de définir une valeur sur la scope $ avec ce que vous sélectionnez.

   Foo = {{foo}}

Ce ne sont que les bases, mais j’espère que cela aide.

Je devais faire un peu plus de travail pour que cela fonctionne avec un service $ http.

Le service:

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

La directive:

 app.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) { return { ressortingct: "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, eg scope.yourObject= selectedItem.item.value; scope.$apply(); event.preventDefault(); } }); } }; }]);

Le html: