方法一:点击后,让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. JavaScript中的日期时间函数

    1.Date对象具有多种构造函数,下面简单列举如下 new Date() new Date(milliseconds) new Date(datestring) new Date(year, mont ...

  2. 小程序开发基础-swiper 滑块视图容器

    小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...

  3. 《Java 多线程编程核心技术》- 笔记

    作为业务开发人员,能够在工作中用到的技术其实不多.虽然平时老是说什么,多线程,并发,注入,攻击!但是在实际工作中,这些东西不见得用得上.因为,我们用的框架已经把这些事做掉了. 比如web开发,外面有大 ...

  4. Java回调机制总结

    调用和回调机制 在一个应用系统中, 无论使用何种语言开发, 必然存在模块之间的调用, 调用的方式分为几种: 1.同步调用 同步调用是最基本并且最简单的一种调用方式, 类A的方法a()调用类B的方法b( ...

  5. java IO流之详细总结

    什么是io流? 分为两种: 输入流:可以从文件中读取到程序,从源数据源读取到程序,叫做输入流. 输出流:可以从程序中读取到文件,从程序写,使用输出流,写入到文件中.叫做输出流. 使用File操作文件或 ...

  6. 解决关于 在android studio 出现的 DELETE_FAILED_INTERNAL_ERROR Error while Installing APK 问题

    在ionic2开发中,用android studio 打包apk的时候出现DELETE_FAILED_INTERNAL_ERROR Error while Installing APK. 我的andr ...

  7. mysql 开发进阶篇系列 55 权限与安全(安全事项 )

    一. 操作系统层面安全 对于数据库来说,安全很重要,本章将从操作系统和数据库两个层面对mysql的安全问题进行了解. 1. 严格控制操作系统账号和权限 在数据库服务器上要严格控制操作系统的账号和权限, ...

  8. 介绍 JSON(摘自网络)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...

  9. R语言命令汇总

    > qqplot(spear,fastrankweight)> qqplot(spear,fastrankweight,main="title")> qqplot ...

  10. 了解Java内存模型,看完这一篇就够了

    前言(此文草稿是年前写的,但由于杂事甚多一直未完善好.清明假无事,便收收尾发布了) 年关将近,个人工作学习怠惰了不少.两年前刚做开发的时候,信心满满想看看一个人通过自己的努力,最终能达到一个什么样的高 ...