避免在AngularJS中多次單擊按鈕

Question

我有一個按鈕，單擊后將保存表單信息。 問題是，用戶無需單擊“保存”按鈕上的1，只要它在屏幕上消失，就可以多次單擊它。 這樣，我保存了相同的表格，該表格又引發了重復的異常。 請幫我。 提前致謝。

<button ng-click="myFunc()">Save</button>

在上面的代碼中，myFunc（）由用戶單擊的次數觸發。

Answer 1

使用$scope變量並ng-disabled以更新點擊並檢查變量，

<button  ng-click="myFunc()" ng-disabled="buttonClicked"></button>

控制者

$scope.buttonClicked = true;

Answer 2

我認為在首次單擊后禁用該按鈕將幫助您解決此問題。

Answer 3

如果您希望此功能與多個按鈕相關：

JS：

$scope.disabled = {};
$scope.myFunc = function(identifier) {
    $scope.disabled[identifier] = 1;
    ...
}

HTML：

<button  ng-click="myFunc(identifier)" ng-disabled="disabled.identifier"></button>

如果您只想通過一個按鈕使用此功能：

JS：

$scope.disabled = 0;
$scope.myFunc = function() {
    $scope.disabled = 1;
    ...
}

的HTML

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

Answer 4

您可以在第一次單擊后禁用提交按鈕，以防止重復輸入。 例如，您有類似HTML的內容，

 <div ng-app="mydemo" ng-controller="myController">
        <button type="submit" ng-disabled="isDisabled" ng-click="myFunc()"> Submit</button>
    </div>

angular.module('mydemo', [])
    .controller('myController',function($scope){

    $scope.isDisabled = false;

    $scope.disableButton = function() {
        $scope.isDisabled = true; // To disable Button
    }

    });

這樣您可以禁用按鈕。 它一定會為您工作。 謝謝。

Answer 5

為此創建一個指令，以便可以重復使用

app.directive('clickAndDisable', function() {
  return {
    scope: {
      clickAndDisable: '&'
    },
    link: function(scope, iElement, iAttrs) {
      iElement.bind('click', function() {
        iElement.prop('disabled',true);
        scope.clickAndDisable().finally(function() {
          iElement.prop('disabled',false);
        })
      });
    }
  };
});

因此請使用click-and-disable="myFunc()"而不是ng-click

Answer 6

首次單擊后隱藏表格可解決此問題。