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

前端之家收集整理的这篇文章主要介绍了angular ng-click防止重复提交实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

方法一:

点击后,让button的状态变为disable

js指令:

html:

代码如下:
//把 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,transclude);
  };
  return $delegate;
}]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章