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