angular ng-click防止重复提交实例

关于Angular中的ng-click防止重复提交，这是一个在实际开发中经常遇到的问题。长沙网络推广团队对此有深入的理解和实践经验，今天他们想把这份经验分享给大家，希望能给大家带来一些启示和帮助。接下来跟随长沙网络推广团队的脚步，看看他们是如何解决这个问题的。

方法一：通过点击后禁用按钮来防止重复提交。这是一种简单而实用的方法。通过定义一个指令clickAndDisable，我们可以在点击按钮后将其禁用，等待操作完成后再重新启用。这样，就能有效防止因多次点击导致的重复提交问题。以下是具体的实现代码：

js指令实现：

```javascript

.directive('clickAndDisable', function() {

return {

scope: {

clickAndDisable: '&'

},

link: function(scope, element, attrs) {

element.bind('click', function() {

element.prop('disabled', true); // 禁用按钮

scope.clickAndDisable().then(function() { // 执行操作后重新启用按钮

element.prop('disabled', false);

});

});

}

};

})

```

在html中，我们可以将原来的ng-click指令替换为click-and-disable指令：

```html

下一步

```

在app.config中注入$provide：

```javascript

$provide.decorator('ngClickDirective',['$delegate','$timeout', function ($delegate,$timeout) {

var delay = 500; // 设置间隔时间

$delegate[0].pile = function (element, attrs, transclude) {

var disabled = false; // 记录按钮是否被禁用状态

function onClick(evt) { // 定义点击事件处理函数

if (disabled) { // 如果按钮已被禁用，则阻止事件默认行为和冒泡行为

evt.preventDefault();

evt.stopImmediatePropagation();

} else { // 如果按钮未被禁用，则执行操作并禁用按钮，等待一定时间后启用按钮状态重置为未禁用状态

disabled = true;

$timeout(function () { disabled = false; }, delay, false);

}

}