How to quickly click + AngularJS for iPad

Question

Delay when clicking on ng-click on iPad using AngularJS I have a generate directive that I need to write

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

But he does not know what fastClick is, although I have included it in my application. I would think that it should be created as a service, and then introduced into my directive, but how?

Answer 1

Just in case someone finds this, who does not use a 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"]); } }); }; }); 

this is gfTop because the sample is a good movies app. Feel free to change this as you wish.

Also note that you must change all your "ng-click" to "gfTap".

UPDATED: to handle click and click events.

Answer 2

It is quite simple to implement your own shutdown directive without an external library. I would advise that.

Goodfilms viewed this on their blog about their AngularJS mobile app: http://goodfil.ms/blog/posts/2012/08/13/angularjs-and-the-goodfilms-mobile-site-part-1/

Here's their multiple code (also in Coffeescript), right 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 

Answer 3

AngularJS 1.1.5 comes 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 highly recommend not applying this directive yourself - there are many extreme cases that can break (ghost clicks, etc.). Check out the code above for more examples of the edges you need to process.