angularjs - How to handle multiple touch events on a single HTML element using Angular directives -

angularjs - How to handle multiple touch events on a single HTML element using Angular directives -

in mobile application, have main view display content, in html:

<div class="imageview" na-swipe="next()" na-tap="showcontrols()"> content here </div>

in order handle swipe , touch events using jquery (or hammer.js), i've created these 2 directives:

angular.module("namodule").directive 'natap', -> (scope, element, attrs) -> tapping = false element.bind 'touchstart', -> tapping = true element.bind 'touchmove', -> tapping = false element.bind 'touchend', -> scope.$apply(attrs['natap']) if tapping angular.module("namodule").directive 'naswipe', -> (scope, element, attrs) -> tapping = false swiping = false element.bind 'touchstart', -> tapping = true element.bind 'touchmove', -> swiping = true element.bind 'touchend', -> scope.$apply(attrs['naswipe']) if (swiping , tapping)

the naswipe seems work well,that next() called whenever swipe performed...however, when tap next() , showcontrols() both firing ... how cleanly separate touch , swipe on 1 div? thanks.

i think approaching in wrong way utilize case.

consider using 1 directive, template markup described, , define events want capture in link() function directive.

something next directive:

angular.module('namodule').directive('imageview', function() { homecoming { restrict: 'e', replace: true, scope: { // required content ... }, template: '<div class="imageview"> content here </div>', controller: function($scope, $attrs) { $scope.next = function() { // handle function.. } $scope.showcontrols = function() { // handle function.. } }, link: function(scope, element, attrs, controller) { element.bind('touchstart', function(e) { scope.tapping = true; scope.swiping = true; } element.bind('touchmove', function(e) { scope.tapping = false; scope.swiping = true; } element.bind('touchend', function(e) { if(scope.tapping) { scope.next(); } else { scope.showcontrols(); } } } } });

angularjs touch swipe