目的：
在angularjs1.*中通过装饰器进行服务的功能扩展。这里需要防止按钮短时间内重复点击，造成服务器负载过高。我们需要通过覆写ng-click指令来实现。
知识点：
1.依赖注入
2.装饰器设计模式
3.指令的执行顺序
4.阻止事件传播
5.防抖机制
讲解：
1.AngularJS中默认实现了依赖注入，通过$http的方式注入需要的服务。内部实现机制是通过将函数的function进行tostring，然后进行解析。相当于JAVA中的反射机制。
2.装饰器设计模式
image.png
需要相同接口，装饰之后，返回原来功能。
3.指令的执行顺序
覆写ng-click有两个阶段，可以在编译阶段，也可以在执行阶段。由于compile阶段只进行一次，而link阶段则会运行多次。为了性能考虑，必须定义在compile阶段。
4.阻止事件传播
由于防抖当中需要在一定时间内禁止组件的事件传播功能，因此需要用到JS的三种事件阻断机制。
stopPropagation : 阻止对象的当前监听事件传播
preventDefault：阻止对象发生的浏览器默认事件（比如a标签打开链接），但是监听事件依然传播（a的click事件依然传递）。
stopImmediatePropagation：组织对象的全部监听事件传播。
5.防抖思想
代码实现：
$provide.decorator('ngClickDirective',['$delegate','$timeout',function($delegate,$timeout){//需要在app.conf中注入$provide
var origin = $delegate[0].compile;//保存原compile函数 $delegate作为指令的引用 必须在编译阶段修改 不能在link阶段修改
var defer = 1000;
$delegate[0].compile = function(element,attrs,transclude){ //装饰compile函数 增加功能
var disabled = false;
function onClick(event) {
if (disabled) {
event.preventDefault();//阻止默认事件
event.stopImmediatePropagation();//阻止所有事件传播
}
else {
disabled = true;
$timeout(function(){disabled = false;},defer,false);//false表示不进行脏检查
}
}
element.on('click',onClick);
return origin(element,attrs,transclude);//改动compile之后自动触发link操作
}
return $delegate;//必须返回引用，否则angular报错
}]);
效果：
image.png
每秒点击三次，只触发一次操作。
