避免多次点击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

您可以在第一次点击后禁用您的提交按钮以防止重复输入。 例如，你有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 4

这就是如果你要这个功能相关的多个按钮：

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 5

隐藏表单后第一次点击解决了这个问题。

Answer 6

为此创建指令，以便它可以重复使用

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