angular.js ui + bootstrap typeahead +異步調用

Question

我正在使用帶有angular.js指令的typeahead，但我填充自動完成的函數會進行異步調用，我無法返回它來填充自動完成。 反正有沒有讓它與這個異步調用一起工作？

Answer 1

我可以假設您正在使用Bootstrap 2.x的類型？

如果是這樣，在文檔中， typeahead()的選項的source字段的描述是這樣的：

要查詢的數據源。 可以是字符串數組或函數。 該函數傳遞兩個參數，即輸入字段中的查詢值和進程回調。 通過進程回調的單個參數直接或異步返回數據源，可以同步使用該函數。

你絕對可以傳入一個異步函數作為source attr。 source函數可能是這樣的：

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

更新：

如果您使用的是Angular Bootstrap的typeahead，它應該更容易。 根據Angular Bootstrap的文檔（ http://angular-ui.github.io/bootstrap/ ），您可以返回對typeahead函數的承諾。 文檔中的一些示例：

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

一個更簡單的可能是：

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

或者你可以建立自己的承諾：

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

實際上，許多服務，如$http ，只是在你打電話時返回承諾。 更多關於AngularJS中的承諾： https ：//docs.angularjs.org/api/ng/service/ $ q