Question

我知道双击/多击angularJS的解决方案，禁用按钮点击＆amp;在使用ng-disabled完成ajax处理后启用它。请建议在angularJS中双击处理的任何其他最佳解决方案......

我们的代码将在按钮点击时调用ajax方法＆amp;将采取少量的工作和处理从db获取数据。我们必须限制第二次/多次点击。

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

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

createDialogService（ 'AJS /普通/模板/弹出/ config_reminder_popup.html'， { 标题：isFrom，背景：是的， controller：'configRemindersCBController'， footerTemplate：''+ action +'' }）;

$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个选项：

更改已禁用状态的css，使其显示为已启用。
使用只在设置时执行操作的范围变量来模仿它。

第二个：

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

AngularJS如何限制双/多次点击

3 个答案:

AngularJS如何限制双/​​多次点击

3 个答案:

AngularJS如何限制双/多次点击