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


Posted in Javascript onJune 16, 2017

方法一:点击后,让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;
    }]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 #Javascript
vue实现全选、反选功能
Nov 17 #Javascript
vue中将网页打印成pdf实例代码
Jun 15 #Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 #Javascript
Angularjs为ng-click事件传递参数
Jun 15 #Javascript
详解原生js实现offset方法
Jun 15 #Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 #Javascript
You might like
Php Cookie的一个使用注意点
2008/11/08 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
php的socket编程详解
2016/11/20 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
js实现消息滚动效果
2017/01/18 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
用JS实现选项卡
2020/03/23 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
终端业务员岗位职责
2013/11/27 职场文书
英文商务邀请信
2014/01/22 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
建国大业观后感800字
2015/06/01 职场文书
php png失真的原因及解决办法
2021/10/24 PHP