Question

当我想从我的页面删除记录时，我需要在删除之前显示确认消息。为此我使用了锚和$username = "أحمد ابراهيمابــــــــــــــــــــــــــــــــــ"; $tmp1 = htmlentities($username, ENT_QUOTES, 'UTF-8'); $name = utf8_encode($tmp1); return $name;来删除这样的行。在这里，用户可以多次点击锚点。这是一个严重的问题，因为确认弹出窗口会多次呈现。我的例子是一个样本。在我的项目中，我遇到了太多这样的问题。我想阻止多次点击以扩展ng-click='delete()'。

Answer 1

如果我们覆盖ngClick指令，那么我们可以保护多次点击。

app.config(['$provide', function ($provide) {
        $provide.decorator('ngClickDirective',['$delegate','$timeout', function ($delegate,$timeout) {
            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;
        }]);
    }]);

Answer 2

更容易ng-click =“your_function（）”

`

your_function(){
if(this.allowClick){
            return false;
        }
this.allowClick = true;
// do your func her
//end function
this.allowClick = false;
}

`

希望这有帮助！

Answer 3

为什么不添加一个表示该函数已经存在并且处于运行/工作状态的标志。任务完成或取消后，您可以释放运行/工作状态。像这样......（请参阅链接上绑定self.isWorking指令的vm.isWorkng或ng-disabled）。在下面的示例中，用户可以尝试垃圾邮件单击删除按钮，它不会弹出多个确认框，因为一旦单击它，链接将处于禁用状态，并且只有在代码释放后才会再次启用。适用于表单提交等，以防止垃圾邮件点击。

(function() {
  'use strict';
  
  angular.module('myApp',[]);
  
  angular.module('myApp')
    .factory('mySvc', mySvc);
  
  mySvc.$inject = ['$timeout', '$log'];
  function mySvc($timeout, $log) {
    var svc = {
      deleteSomething: deleteSomething
    };
    
    return svc;
    
    function deleteSomething() {
      return $timeout(function() {
        $log.info('Deleting something...');
        return true;
      }, 5000); //pretends the delete will take like 5 seconds
    }    
  }
  
  angular.module('myApp')
    .controller('myCtrl', myCtrl);
  
  myCtrl.$inject = ['$log', 'mySvc'];
  function myCtrl($log, mySvc) {
    var self = this;    
    self.isWorking = false;    
    self.delete = deleteFn;
    
    function deleteFn() {
      self.isWorking = true; //this should disable the link
      if (!confirm('Are you sure? OK to continue, Cancel to cancel')) {
        self.isWorking = false;
        return;
      }
      
      //confirmed...so delete..
      mySvc.deleteSomething()
        .then(function() {
          $log.info('Deleted!');
        })
        .finally(function() {
          self.isWorking = false;
        });
    }
  }  
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl as vm">
<a href="#" ng-click="vm.delete()" ng-disabled="vm.isWorking">Delete!!</a>
</div>

Answer 4

我的方法是创建一个像这样的自定义指令

Module.directive("singleClick", ['$parse',
function($parse) {
    return {
        restrict: 'A',
        scope: true,
        compile: function ($element, attr) {
            var fn = $parse(attr.singleClick);
            return function(scope, element) {
                scope.running = false;

                element.on("click", function (event) {
                    scope.$apply(function () {
                        if(!scope.running) {
                            var result = fn(scope, { $event: event });
                            if(!!result && result.finally !== undefined) {
                                scope.running = true;
                                element.addClass('state-waiting');
                                result.finally(function () {
                                    element.removeClass('state-waiting');
                                    scope.running = false;
                                });
                            }
                        }
                    });
                });
            };
        }
    };
}]);

它期望被调用的函数返回promise。它在元素上添加了state-waiting类，并在范围中添加了running变量。

编辑：以下是使用https://jsfiddle.net/zsp7m155/

的示例

防止angularjs中的多次单击

4 个答案: