AngularJS如何限制雙擊

Question

我知道對angularJS雙擊/單擊的解決方案，該解決方案在使用ng-disabled完成ajax處理后禁用按鈕單擊並啟用它。 請提出其他最佳解決方案來處理angularJS中的雙擊...

我們的代碼將在單擊按鈕時調用ajax方法，並花費少量的tme來處理和從db獲取數據。 我們必須限制第二次/多次點擊。

我不想在進行Ajax時允許點擊...

歡迎，請成為簡單的解決方案，而不是使用ng-disabled，我是AngularJS的學習者

createDialogService（'ajs / common / templates / popup / config_reminder_popup.html'，{title：isFrom，background：true，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絕對是解決此問題的正確方法-這是在特定條件下禁用對象的現成指令。

如果您需要禁用它而不使其看起來處於禁用狀態，則有兩種選擇：

1. 將css更改為禁用狀態，使其看起來像已啟用。
2. 用一個僅在設置時才執行操作的作用域變量來模仿它。

對於第二個：

$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我從忙碌的bar實現獲得了幫助，該實現在有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;
}