AngularJS如何限制双击/多次单击

Question

我知道双击/多次单击 angularJS 的解决方案，在使用 ng-disabled 完成 ajax 处理后禁用按钮单击并启用它。请提出任何其他最佳解决方案来处理 angularJS 中的双击...

我们的代码将在按钮单击时调用 ajax 方法，并且会花费少量时间来处理和从数据库获取数据。我们必须限制第二次/多次点击意味着同时。

我不想在 ajax 进行时允许点击...

欢迎使用简单的解决方案而不是使用 ng-disabled，我是 AngularJS 的学习者

createDialogService('ajs/common/templates/popup/config_reminder_popup.html', { 标题：是从， 背景：真实， 控制器：'configRemindersCBController', footerTemplate: '' + 动作 + '' });

$scope.saveOrUpdateReminder = function (reminder)
{
  if ($scope.isDisabled)
  {
    return;
  }
  $scope.isDisabled = true;
  if (!reminder.daysBeforeAfterCheckDate || reminder.daysBeforeAfterCheckDate === '')
  {
    alertService.openValidatPopup('Please enter days before expiration.', "Error", true, 'configRemindersCBController', 'Ok', 'u1_remove.png');
    $scope.isDisabled = false;
    return;
  }

  configRemindersService.isDaysBeforeAfterCheckDate($scope.objectId, reminder, function (result)
  {
    if (!reminder.selectedMessageTemplate.messageId || reminder.selectedMessageTemplate.messageId === '')
    {
      alertService.openValidatPopup('Please select message template.', "Error", true, 'configRemindersCBController', 'Ok', 'u1_remove.png');
      $scope.isDisabled = false;
      return;
    }
    else if (!reminder.selectedReminderSendOption.reminderSendOptionValue || reminder.selectedReminderSendOption.reminderSendOptionValue === '')
    {
      alertService.openValidatPopup('Please select reminder send option.', "Error", true, 'configRemindersCBController', 'Ok', 'u1_remove.png');
      $scope.isDisabled = false;
      return;
    }
    var enableReminder;
    if (result.Result === 'No')
    {
      if (reminder.enable === true)
      {
        enableReminder = 'Enable';
      }
      else
      {
        enableReminder = 'Disable';
      }

      configRemindersService.addOrUpdateReminderConfigLine($scope.objectId, reminder, enableReminder, function (remindersResponse)
      {
        var reminder = remindersResponse.reminderConfigLine;
        $rootScope.CONFIG = JSON.parse(remindersResponse.configData);
        $scope.$modalClose();
        $scope.isDisabled = false;

        _.filter(configRemindersService.getMessageTemplates(), function (msg)
        {
          if (reminder.messageTemplateId === msg.messageId)
          {
            reminder.selectedMessageTemplate = msg;
          }
        });

        _.filter(configRemindersService.getReminderSendOptions(), function (option)
        {
          if (reminder.reminderSendOption === option.reminderSendOptionValue)
          {
            reminder.selectedReminderSendOption = option;
          }
        });

        if (configRemindersService.getIsFrom() === 'Create Reminder')
        {
          configRemindersService.getReminders().push(reminder);
        }
        else
        {
          configRemindersService.getReminders()[configRemindersService.getIndex()] = reminder;
        }
      });
    }
  });
};

Answer 1

ng-disabled 绝对是正确的方法——它是在特定条件下禁用对象的现成指令。

如果您需要在它看起来被禁用的情况下禁用它，您有 2 个选项：

1. 将禁用状态的 css 更改为启用状态。
2. 使用仅在设置时执行操作的范围变量来模拟 this。

第二个：

$scope.stopClick = false;

$scope.buttonClick = function () {
    if ($scope.stopClick) { return; }
    $scope.stopClick = true;
    <.. code ..>
    callback: function(data) {
        $scope.stopClick = false;
    }
};

这将实现目标，但它是在重新发明轮子，并且可能不如仅禁用元素并重新设置样式那么强大。

Answer 2

你可以这样做：

创建一个 $scope 变量

$scope.myFunnyPromise = null;

在模板中：

<button ng-if="myFunnyPromise == null"></button>

仅当 myFunnyPromise 等于 null 时才显示按钮。

在你的功能中：

if($scope.myFunnyPromise !== null){

  return $scope.myFunnyPromise;

}

$scope.myFunnyPromise = asyncTask().finally(function cleanUp(){

  //clear the $scope variable
  $scope.myFunnyPromise = null;
})

Answer 3

您可以在$rootScope 中拥有一个函数，其中包含有关是否存在正在进行的http 请求的信息。然后，您可以使用该值来禁用您不希望连续点击事件的按钮。

我通常使用fieldset 属性来禁用输入字段，同时有一个正在进行的 http 请求。

<fieldset ng-disabled="isWaitingForServerResponse()">  //when there is an ongoing request, input fields under this tag will be disabled       </fieldset>

为了实现isWaitingForServerResponse，我从一个繁忙的栏实现中获得了帮助，它在有一个http请求时显示了一个加载栏。它在有新请求时创建事件，并在停止时创建另一个请求。所以在这些事件中，我增加了一个计数器，它保存了活动的 http 请求的数量，并为每个 http 响应递减了它。我以前没用过，但我想你也可以使用$http.pendingRequests 属性来了解是否有待处理的http请求。

$rootScope.numberOfResponseWaitingFromServer = 0;
$rootScope.$on("cfpLoadingBar:loading", function (event) {
  $rootScope.numberOfResponseWaitingFromServer++;
});
$rootScope.$on("cfpLoadingBar:loaded", function (event) {
  $rootScope.numberOfResponseWaitingFromServer--;
});
$rootScope.isWaitingForServerResponse = function () {
  return $rootScope.numberOfResponseWaitingFromServer > 0;
}