Implement touch events like tap and doubletap on the same element with Angular.js, Hammer.js and the plugin jQuery/Hammer. This gist avoid to fire a tap event when we try to fire a double tap event on an element. Note : We will not use tap event, but we will consider a tap event as a click. I think it's a quite good solution since tap event is v…

controllers.js

app.controller("AppCtrl", function($scope){
  
  var count = 0;
  var timeout;

  /*
  * This function count each click. At the first click 
  * it create a timeout of 300 ms. 
  * If a second click is fire on this interval it will 
  * execute what we want on "double tap". 
  * It works on browsers, but for tablets and smartphones 
  * devices we will need the real double tap event implemented 
  * by hammer.js, see the next file.
  */
$scope.countClicks = function(user) {
    count++;
    if(clicks > 1) {
    //Do what we want on a browser double click   
  	} else {
  	  timeout = setTimeout(function() {
        //Do what we want on a click    
  	    count = 0;
  	  }, 300);
  	}    	
}
  
  $scope.actionOnDoubletap(){
    //The action we will call on the real double tap
  }
  
});

directives.js

/*
* We can create a new atribute in the angular way.
*/

angular.module('myModule', []).
directive('onDoubletap', function () {
    return function (scope, element, attrs) {
        return $(element).hammer({
            prevent_default: false,
            drag_vertical: false
        })
        .bind("doubletap", function (ev) {
            return scope.$apply(attrs['onDoubletap']);
        });
    };
});

index.html

....
  <!-- Include the librairies -->
  <script src="lib/jquery/jquery-1.8.2.min.js"></script>
  <script src="lib/hammer/hammer.js"></script>
  <script src="lib/hammer/jquery.hammer.js"></script>
  <script src="lib/angular/angular.min.js"></script>
...

<!-- We can use our function and the directive created before : -->
<a ng-click="countClicks()" on-doubletap="actionOnDoubletap()"></a>