在AngularJ中装饰ng-click指令

发布时间：2020-12-17 07:46:28 所属栏目：安全来源：网络整理

导读：我一直在研究修改AngularJS ng-click指令以添加一些其他功能.我有几个不同的想法,使用它,但一个简单的是添加Google Analytics(分析)跟踪到所有ng点击,另一个是防止双击. 为了做到这一点,我的第一个想法是使用装饰器.所以这样的事情 app.config(['$provide',f

我一直在研究修改AngularJS ng-click指令以添加一些其他功能.我有几个不同的想法,使用它,但一个简单的是添加Google Analytics(分析)跟踪到所有ng点击,另一个是防止双击.

为了做到这一点,我的第一个想法是使用装饰器.所以这样的事情

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

但是,如果装饰器在实例化时被触发,则不会在符合指令中的表达式时起作用.所以在这种情况下,它会在加载指令的元素时进行分析,而不是单击元素.

所以说真正的问题.装饰器有一些方法可以得到指令被实例化的元素吗？如果可以的话,从委托中,我可以绑定我自己的点击事件,除了ng点击之外,还可以触发它.

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

您当然可以使用装饰器来添加功能.我已经做了一个 plunkr快速演示如何.在您的装饰器体中,您可以使用自己的自定义逻辑替换编译功能(在该示例中,如果track属性存在则绑定到点击事件),然后调用原始编译功能.这是代码段：

$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,transclude);
  };
  return $delegate;
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!