angular ng-click防止重复提交实例
更新时间:2017年06月16日 08:22:14 作者:Cynthia娆墨旧染
本篇文章主要介绍了angular ng-click防止重复提交实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
方法一:点击后,让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; }]);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
angular6.0开发教程之如何安装angular6.0框架
这篇文章主要介绍了angular6.0开发教程之如何安装angular6.0框架,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-06-06angular安装import echarts from‘echarts‘标红报错解决
这篇文章主要介绍了angular安装import echarts from‘echarts‘标红报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10Angularjs编写KindEditor,UEidtor,jQuery指令
使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架。2015-01-01AngularJs $parse、$eval和$observe、$watch详解
这篇文章主要介绍了AngularJs $parse、$eval和$observe、$watch的相关资料,需要的朋友可以参考下2016-09-09AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
这篇文章主要介绍了AngularJS实现用户登录状态判断的方法,通过Model添加拦截过滤器,路由增加限制实现针对登陆状态的判断功能,需要的朋友可以参考下2016-12-12
最新评论