javascript - 在 ng-repeat 中装饰 ng-click

Question

我需要修饰 ngClickDirective 以添加自定义监听器。此代码适用于未嵌套在 ng-repeat 中的 ng-click:

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

当 ng-click 嵌套在 ng-repeat 中时，是否有任何方法可以使此 bind 工作？

显示问题的简单 plnkr:http://plnkr.co/edit/hEkBHG7pcJfoXff523Yl?p=preview

Answer 1

出于性能原因，ng-repeat 将只编译原始元素一次。然后只需克隆该元素并对集合中的每个项目进行链接。

因此，您必须在 link: 函数而不是像这样的 compile: 添加自定义监听器:

$provide.decorator('ngClickDirective', ['$delegate', function ($delegate) {
    var originalCompile = $delegate[0].compile;
    $delegate[0].compile = function() {
        var originalLink = originalCompile.apply(this, arguments);

        return function postLink(scope, element, attr) {
          element.bind('click', function() {
              alert('hello!');
          });

          return originalLink.apply(this, arguments);
        };
    };
    return $delegate;
}]);

示例 Plunker: http://plnkr.co/edit/aGbB5LuJNtdL9JXtwNSV?p=preview