在 AngularJs 中装饰 ng-click 指令

Question

我一直在研究修改 AngularJS ng-click 指令以添加一些附加功能。我对它的用途有几个不同的想法，但一个简单的想法是将 Google Analytics 跟踪添加到所有 ng-clicks，另一个是防止双击。

要做到这一点，我的第一个想法是使用装饰器。所以是这样的：

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

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

那么回到真正的问题。装饰器是否有某种方法可以获取指令实例化的元素？如果我可以从委托中获取元素，我可以在其上绑定我自己的点击事件以触发除 ng-click 之外。

如果没有，您将如何在所有 ng-click 上添加一些内容？

Answer 1

您当然可以使用装饰器来添加功能。我做了一个快速的plunkr 来演示如何。基本上，在您的装饰器主体中，您将 compile 函数替换为您自己的自定义逻辑（在示例中，如果 track 属性存在，则绑定到 click 事件），然后调用原始 compile 函数。这是sn-p：

$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;
});