在AngularJs中修饰ng-click指令

Question

我一直在寻找修改AngularJS ng-click指令来添加一些额外的功能.我对使用它有什么不同的想法,但一个简单的方法是将Google Analytics跟踪添加到所有ng-click,另一个是防止双击.

要做到这一点,我的第一个想法是使用装饰器.所以像这样:

app.config(['$provide', function($provide) {
  $provide.decorator('ngClickDirective', ['$delegate', function($delegate) {
    // Trigger Google Analytics tracking here
    return $delegate;
  }]);
}]);

但是这不会起作用,因为装饰器会在实例化时触发,而不是在满足指令中的表达式时触发.因此,在这种情况下,它会在带有指令的元素加载时进行分析,而不是在单击元素时进行分析.

所以关于真正的问题.装饰器是否有某种方法可以获得指令实例化的元素？如果我可以,从委托,到达元素,我可以绑定我自己的点击事件,以触发除ng-click之外.

如果没有,您将如何在所有ng-clicks上添加内容？

Answer 1

您当然可以使用装饰器来添加功能.我做了一个快速的傻瓜来演示如何.基本上,在装饰器主体中,用自己的自定义逻辑替换编译函数(在示例中,如果存在track属性,则绑定到click事件),然后调用原始编译函数.这是片段:

$provide.decorator('ngClickDirective', function($delegate) {
  var original = $delegate[0].compile;
  $delegate[0].compile = function(element, attrs, transclude) {
    if(attrs.track !== undefined) {
      element.bind('click', function() {
        console.log('Tracking this');
      });
    }
    return original(element, attrs, transclude);
  };
  return $delegate;
})

Answer 2

这是正确的更新版本(从答案中改进):

$provide.decorator('ngClickDirective', function($delegate) {
    var compile = $delegate[0].compile;
    $delegate[0].compile = function() {
       var link = compile.apply(this, arguments);
       return function(scope, element, attrs, transclude) {
           if (attrs.track !== undefined) {
               element.bind('click', function() {
                   console.log('Tracking this');
               });
           }
           return link.apply(this, arguments);
       };
    };
    return $delegate;
});