angularjs - 在 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;
  }]);
}]);

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

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

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

Answer 1

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

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