方法一:点击后,让button的状态变为disable

js指令:

.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);
})
});
}
};
})

html:

<button type="button" class="btn btn-info btn-bordered waves-effect w-md waves-light" click-and-disable="next()">下一步</button>   //把 ng-click 改为指令click-and-disable

方法二:在app.config里面,重写ng-click事件,设置一定事件内不能重复点击

$provide.decorator('ngClickDirective',['$delegate','$timeout', function ($delegate,$timeout) {  //记得在config里注入$provide
var original = $delegate[0].compile;
var delay = 500;//设置间隔时间
$delegate[0].compile = 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);
}
}
// scope.$on('$destroy', function () { iElement.off('click', onClick); });
element.on('click', onClick); return original(element, attrs, transclude);
};
return $delegate;
}]);

angular ng-click防止重复提交的更多相关文章

  1. web前端防治重复提交

    web前端开发中防治重复提交 web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表 ...

  2. php 解决和避免form表单重复提交的方法

    在提交表单的时候,可能遇到网速等导致页面突然加载变慢,用户重复地点击提交按钮,将在数据库产生多条数据,导致不可控情况. 比如下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏 ...

  3. Ajax防止重复提交

    转:http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html 谈谈防止重复点击提交   首先说说防止重复点击提交是什么意思. ...

  4. query 防止ajax重复提交

    项目用到js了,首选jquery,能用库用库,原则. 碰到重复提交的问题,禁止住才行.百度google,还是Google给力. 知乎上有个高人,总结了四种,利用Jquery .post方法返回jqXH ...

  5. 关于Asp.Net中避免用户连续多次点击按钮,重复提交表单的处理

    Web页面中经常碰到这类问题,就是客户端多次点击一个按钮或者链接,导致程序出现不可预知的麻烦. 客户就是上帝,他们也不是有意要给你的系统造成破坏,这么做的原因很大一部分是因为网络慢,点击一个操作之后, ...

  6. ajax防止重复提交请求1

    ajax防止重复提交请求 A. 独占型提交 只允许同时存在一次提交操作,并且直到本次提交完成才能进行下一次提交. module.submit = function() {   if (this.pro ...

  7. form表单重复提交,type=“button”和type=“submit”区别

    公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...

  8. Servlet中表单的重复提交

    1.用户登录页面: ->设置一个UUID到session中 ->将UUID添加到隐藏域中,提交到服务器 <% //进入页面,设置一个UUID,将UUID添加到session中 Str ...

  9. 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

    方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...

  10. 一脸懵逼学习Struts数据校验以及数据回显,模型驱动,防止表单重复提交的应用。

    1:Struts2表单数据校验: (1)前台校验,也称之为客户端校验,主要是通过Javascript编程的方式进行数据的验证. (2)后台校验,也称之为服务器校验,这里指的是使用Struts2通过xm ...

随机推荐

  1. sql并集union和union all的区别

    union : 对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序; union all:  对两个结果集进行并集操作,包括重复行,不进行排序; intersect : 对两个结果集进行交 ...

  2. Javascript高级编程学习笔记(20)—— 创建对象

    由于今天有点事,加上对象原型链的东西有点多,所以今天这篇就讲一个小的知识点吧 也算为明天的对象继承做铺垫 工厂模式 虽然使用对象字面量来创建一个对象十分地便捷,但是这个方法有一个显著的缺点 那就是如果 ...

  3. MySQL索引优化看这篇文章就够了!

    阅读本文大概需要 5 分钟. 来源:cnblogs.com/songwenjie/p/9410009.html 本文主要讨论MySQL索引的部分知识.将会从MySQL索引基础.索引优化实战和数据库索引 ...

  4. vue实现一个简易Popover组件

    概述 之前写vue的时候,对于下拉框,我是通过在组件内设置标记来控制是否弹出的,但是这样有一个问题,就是点击组件外部的时候,怎么也控制不了下拉框的关闭,用户体验非常差. 当时想到的解决方法是:给根实例 ...

  5. 认识jsp

     jsp头部指令 <%@page import="com.offcn.utils.PageUtils"%> <%@ taglib uri="http:/ ...

  6. vue中复选框全选与反选

    html主要部分: <template v-for="(item, index) in checkboxList"> <input type="chec ...

  7. os模块及其API&属性

    模块: os os.path 所包含API列表: os.uname: 获取详细的系统信息 os.rename: 文件重命名 os.remove: 删掉文件 os.mkdir: 创建一个目录 os.rm ...

  8. C# 配置文件Xml读写

    分析xxx.exe.config文件: <?xml version="1.0" encoding="utf-8"?> <configurati ...

  9. tar (child): bzip2: Cannot exec: No such file or directory报错

    [root@hejianlai-jenkins ~]# file android-ndk-r8-linux-x86.tar.bz2 android-ndk-r8-linux-x86.tar.bz2: ...

  10. C# 多线程锁之ReaderWriterLockSlim

    1.简介 .NET 3.5 开始 ReaderWriterLockSlim登上舞台,ReaderWriterLockSlim 可以看做是 ReaderWriterLock 的升级版. 由于 Reade ...