微客导航 » 文章资讯 » angular ng-click防止重复提交实例

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

2024-02-19 18:10:05 279

方法一：点击后，让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:


下一步  //把ng-click改为指令click-and-disable

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


$provide.decorator('ngClickDirective',['$delegate','$timeout',function($delegate,$timeout){//记得在config里注入$provide
varoriginal=$delegate[0].compile;
vardelay=500;//设置间隔时间
$delegate[0].compile=function(element,attrs,transclude){

vardisabled=false;
functiononClick(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);

returnoriginal(element,attrs,transclude);
};
return$delegate;
}]);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐