装饰AngularJs中的ng-click指令

一尘不染

装饰AngularJs中的ng-click指令

angularjs

我一直在研究修改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之外绑定我自己的click事件以触发它。

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

阅读 227

2020-07-04

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

2020-07-04