AngularJsでng-clickディレクティブをデコレートする

Question

AngularJS ng-clickディレクティブを変更して、いくつかの追加機能を追加しました。何を使用するかについてはいくつかのアイデアがありますが、単純なものはすべてのクリックにGoogleアナリティクストラッキングを追加する方法と、ダブルクリックを防ぐ方法です。

私の最初の考えは、デコレータを使用することでした。

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

しかし、デコレータがインスタンシエーション時に起動されるため、デコレータの式が満たされていないため、これは機能しません。したがって、この場合、ディレクティブを持つ要素がクリックされたときではなく、その要素が読み込まれたときに解析を行います。

実際の質問にはそうです。デコレータがそのディレクティブがインスタンス化される要素を取得する方法はありますか？私がデリゲートから要素に到達できれば、ng-clickに加えて自分のクリックイベントをバインドしてトリガーすることができます。

そうでない場合は、すべてのクリックで何かを追加するにはどうしますか？

Answer 1

確かにデコレータを使用して、機能性を追加することができます。私はどのようにデモするために素早くplunkrを作った。基本的には、デコレータ本体では、カスタムロジック（この例では、トラック属性が存在する場合は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; 
}) 

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