Question

我有一个视图，需要在按钮点击时进行ajax调用。在处理请求时，如果用户不必要地点击，我不希望请求堆叠。为了阻止通过我做出的多个请求，我做了以下设置。

在视图中

<button ng-click="getBooks()"></button>

在控制器

中

var ajaxInProgress = false;
$scope.getBooks = function () {
  if (ajaxInProgress) {
    return false;
  }
  ajaxInProgress = true;
  BooksFactory
    .getBooks()
    .then(function (response) {
      ajaxInProgress = false;
    })
    .catch(function() {
      ajaxInProgress = false;
    });
};

这对我来说效果很好，但是在同一个视图中将它添加到多个这样的函数中，控制器开始变得混乱。有没有更好的解决方案来清理这个烂摊子？

Answer 1

您可以使用范围变量并将其绑定到ng-disabled。这可以防止在范围函数开始时的额外内容：

在视图中：

<button ng-click="getBooks()" ng-disabled="inProgress"></button>

在控制器中：

$scope.inProgress = false;
$scope.getBooks = function () {
    $scope.inProgress = true;
    BooksFactory
       .getBooks()
       .then(function (response) {
           // do something with response;
       })
       .catch(function() {
           // error handling
       })
       .finally(function() {
           $scope.inProgress = false;
       })      
};

是否有更简洁的方法来阻止多次单击调用AJAX的操作？

1 个答案: