title: How to write directive that hooks into ng-click handler
body: <p>I'm facing a situation in Angular where I sense I'm doing something wrong but I can't find the Angular way to solve it.</p>
  
  <p>I'm developing a mobile app. I would like to create a directive let's call it <code>cc-tap-highlight</code> that would be used in conjunction with ng-click. Meaning that I could use it like this:</p>
  
  <pre><code>&lt;a ng-click="doSomething()" cc-tap-highlight&gt;Click me&lt;/a&gt;
  </code></pre>
  
  <p>What this would do is to add a class to the clicked element and remove it after some seconds.</p>
  
  <p>Now one could say, let's just manually bind to the elements <code>click</code> event in the directive. That would work for a desktop app. However, on mobile devices <code>Angular</code> does a lot of magic for us to have fast tap/clicks:</p>
  
  <p><a href="https://github.com/angular/angular.js/blob/master/src/ngMobile/directive/ngClick.js" rel="nofollow">https://github.com/angular/angular.js/blob/master/src/ngMobile/directive/ngClick.js</a></p>
  
  <p>For sure, I don't want to reimplement all of it's magic!</p>
  
  <p>So, currently, instead of having my <code>cc-tap-highlight</code> directive I use this rather hackish approach:</p>
  
  <p>In the view</p>
  
  <pre><code>&lt;a ng-click="doSomething($event)" cc-tap-highlight&gt;Click me&lt;/a&gt;
  </code></pre>
  
  <p>In the controller:</p>
  
  <pre><code>$scope.doSomething = function($event){
      //do your things with $event.currentTarget
  }
  </code></pre>
  
  <p>There are two major problems with this approach:</p>
  
  <ol>
  <li><p>the controller should not manipulate the DOM</p></li>
  <li><p>We need to repeat the patter over and over through our entire code base violating DRY</p></li>
  </ol>
  
  <p>However, I can't for the life of me, figure out how to write a directive that hooks into the <code>ng-click</code> handler and does it's things.</p>