4

There is a delay when clicking with ng-click on iPad with AngularJS I have the generate directive I need to write

my_app.directive 'touch', ->
  (scope, e, attr) ->
    e.fastClick (e) ->
      scope.$apply attr.fastClick

But it doesn't know what fastClick is even though I've included it in my application. I would think it needs to be created as a service and then injected into my directive, but how?

1

3 Answers 3

15

Just in case someone else finds this, who does not use coffee script, here is the conversion

 app.directive("ngTap", function() {
  return function($scope, $element, $attributes) {
    var tapped;
    tapped = false;
    $element.bind("click", function() {
      if (!tapped) {
        return $scope.$apply($attributes["ngTap"]);
      }
    });
    $element.bind("touchstart", function(event) {
      return tapped = true;
    });
    $element.bind("touchmove", function(event) {
      tapped = false;
      return event.stopImmediatePropagation();
    });
    return $element.bind("touchend", function() {
      if (tapped) {
        return $scope.$apply($attributes["ngTap"]);
      }
    });
  };
});

it's gfTop, becuase the sample is "good films" app. Feel free to change that to whatever you like.

Also note, that you have to change all your "ng-click"s to "gfTap"s.

UPDATED: to handle tap and click events.

3
  • I've used the goodfilms example and I wasn't able to get it to work for me. Apr 19, 2013 at 17:03
  • The other answer provides some logic to prevent the tap event from firing when the user swipes, which is beneficial if the user needs to scroll or perform other swipe gestures
    – Erik J
    May 13, 2013 at 17:28
  • 1
    thank you thank you thank you for this great answer..i just made it work with slight tweaks to an input type = range...Muahhh! Mar 3, 2014 at 11:49
4

It's pretty simple to implement your own tapping directive without an external library. I would advise that.

Goodfilms went over it in their blog post about their AngularJS mobile app: http://goodfil.ms/blog/posts/2012/08/13/angularjs-and-the-goodfilms-mobile-site-part-1/

Here's their tap code (also in Coffeescript), straight from the blog post:

app.directive 'gfTap', ->
  (scope, element, attrs) ->
    tapping = false
    element.bind 'touchstart', -> tapping = true
    element.bind 'touchmove', -> tapping = false
    element.bind 'touchend', -> scope.$apply(attrs['gfTap']) if tapping
2

AngularJS 1.1.5 ships with a built-in ng-click directive that handles touch events.

Docs: http://code.angularjs.org/1.1.5/docs/api/ngMobile.directive:ngClick

Source: https://github.com/angular/angular.js/blob/master/src/ngMobile/directive/ngClick.js

I strongly recommend against implementing a directive like this yourself - there are many edge cases that can break (ghost clicks, etc). Look at the code referenced above for more examples of edge cases that you'll need to handle.

1
  • I see your concern, but the thing is that not everyone is going with the unstable builds (as 1.1.5 was at Aug 2 2013, when you wrote this). I'm going stable, and with me being at 1.0.8, I'm still yet to be introduced to the changes in ngClick to handle fasttaps. Oct 29, 2013 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.