第一次写博客不知道写什么，写个前段时间解决的一个问题作为第一篇文吧（哈哈）。
做项目的时候，经常碰到网不好请求慢的时候用户就会多次进行点击，导致提交多次请求，为了阻止这种情况，自己写了一个点击组件，替换掉原本使用的ng-click。刚开始的时候也是去网上找解决方法，但是网上的多是阻止双击的，并不能满足我需要的效果，后来突然发现$http有个pendingRequests属性——当前正在等待的请求的配置对象数组，正好可以用来判断当前请求是否结束了。

结合用$timeout来阻止双击事件的写法，最后写法如下：

.directive('singleClick',function ($parse, $rootScope, $timeout, $http) {var clickable = true;var directiveName = 'singleClick';return {restrict: 'A',link: function(scope, iElement, attr) {var fn = $parse(attr[directiveName], null, true);iElement.on('click', function(event) {if (!clickable) {event.preventDefault();//阻止默认事件event.stopImmediatePropagation();//阻止所有事件传播 return}else {clickable = false;$timeout(function () { clickable = true;}, 500, false);}if($http.pendingRequests.length > 0){event.preventDefault();//阻止默认事件event.stopImmediatePropagation();//阻止所有事件传播 return}scope.$apply(function() {fn(scope, {$event:event});})});}};})

然后将页面中的ng-click=“func()” 改成 single-click=“func()”。

如果是希望针对按钮有一个禁止的效果，可以使用$watch监听$http.pendingRequests然后设置按钮的禁用启用，这样在请求完成之前按钮就一直处于不可点击状态：

    element.prop('disabled',true);scope.isLoading = function () {return $http.pendingRequests.length > 0;};var clickWatch = scope.$watch(scope.isLoading, function (loading){if(loading){element.prop('disabled',true);}else{element.prop('disabled',false);clickWatch();}});scope.$apply(function() {fn(scope, {$event:event});})