Question

我正在使用带有angular.js指令的typeahead，但是我填充自动完成功能的函数会进行异步调用，而我无法返回它来填充自动完成。反正有没有让它与这个异步调用一起工作？

Answer 1

我可以假设您正在使用Bootstrap 2.x的预先输入吗？

如果是这样，在文档中，source选项的typeahead()字段的说明是这样的：

要查询的数据源。可能是一个字符串数组或一个功能。该函数传递两个参数，查询值在输入字段和进程回调。可以使用该功能通过直接或异步返回数据源来同步通过进程回调的单个参数。

你绝对可以传递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的预先打字，那应该会更容易。根据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

angular.js ui + bootstrap typeahead +异步调用

1 个答案: