Angular.js ui + bootstrap typeahead + appel asynchrone

Puis-je supposer que vous utilisez le type de tête de Bootstrap 2.x?

Si c'est le cas, dans la documentation, la description du champ source des typeahead() est la suivante:

La source de données à interroger. Peut être un ensemble de chaînes ou une fonction. La fonction passe deux arguments, la valeur de requête dans le champ de saisie et le rappel de processus. La fonction peut être utilisée de manière synchrone en renvoyant la source de données directement ou de manière asynchrone via l'argument unique du callback de processus.

Vous pouvez certainement passer une fonction asynchrone comme source Attr. La fonction source pourrait être quelque chose comme:

 function someFunction(query, process) { someAsyncCall(...query or so... , function(res) { // success callback process(res); }, function(err) { // error callback process(null); }); } 

Mettre à jour:

Si vous utilisez le typeahead de Angular Bootstrap, cela devrait être encore plus facile. Selon les docs d'Angular Bootstrap ( http://angular-ui.github.io/bootstrap/ ), vous pouvez simplement vous promettre pour la fonction typeahead . Quelques exemples des documents:

 $scope.getLocation = function(val) { return $http.get('http://maps.googleapis.com/maps/api/geocode/json', { params: { address: val, sensor: false } }).then(function(res){ var addresses = []; angular.forEach(res.data.results, function(item){ addresses.push(item.formatted_address); }); return addresses; }); }; 

Un plus simple pourrait être:

 $scope.getSomething= function(query) { var promise = $http.get('...some url...', { params: { queryName: query } }); return promise; }; 

Ou vous pouvez construire votre propre promesse:

 $scope.getSomething= function(query) { var deferred = $q.defer(); someAsyncCall(...query or so... , function(res) { // success callback deferred.resolve(res); }, function(err) { // error callback deferred.reject(err); }); return deferred.promise; }; 

En fait, de nombreux services comme $http sont juste des promesses de retour lorsque vous les appelez. En savoir plus sur la promesse dans AngularJS: https://docs.angularjs.org/api/ng/service/ $ q