I'm building a Cordova application and click response times are slow.

I found the angular-touch plugin for Angular (which, while designed for Angular 1.2.0, looks like it would likely work with older versions of Angular, as it's really just a set of directives) but upon trying it out, I didn't get the results I wanted. Clicks still aren't firing on tap.

From what I understand, fastclick.js is a more stable alternative to angular-touch at the moment (as angular-touch is still in development). I, however, want my ng-click directives to take advantage of fastclick.

How can I integrate fastclick.js with angular - can I just include the file and init the script, or do I have to wrap fastclick behavior in ng-click (essentially what angular-touch does with its first-party code)?

Note: My app is using Angular 1.0, as it was built before the stable release.

I'm building a Cordova application and click response times are slow.

I found the angular-touch plugin for Angular (which, while designed for Angular 1.2.0, looks like it would likely work with older versions of Angular, as it's really just a set of directives) but upon trying it out, I didn't get the results I wanted. Clicks still aren't firing on tap.

From what I understand, fastclick.js is a more stable alternative to angular-touch at the moment (as angular-touch is still in development). I, however, want my ng-click directives to take advantage of fastclick.

How can I integrate fastclick.js with angular - can I just include the file and init the script, or do I have to wrap fastclick behavior in ng-click (essentially what angular-touch does with its first-party code)?

Note: My app is using Angular 1.0, as it was built before the stable release.

• javascript
• angularjs
• cordova
• touch

• If clicks aren't firing on tap then you did something wrong. I've used ng-click many times and it always worked like a charm. Maybe show us some simplified code. – TheHippo Commented Dec 6, 2013 at 16:11
• As an alternative you could try: github.com/randallb/angular-hammer, which provides directives for binding hammer.js to angular.js. – TheHippo Commented Dec 6, 2013 at 16:14
• @TheHippo Sorry, wasn't clear. Clicks are firing, but after the 300ms delay, is what I meant. This makes everything fairly unresponsive. Honestly, this could be fine for the app, but if possible, I'd like to make it better. – user677526 Commented Dec 6, 2013 at 17:08

2 Answers 2

From this page: the "Angular way" is to .run the FastClick initializer in your Angular JS file. Make sure to load the fastclick.js module before your Angular code.

HTML:

<script src="js/fastclick.js"></script>
<script src="js/app.js"></script>
<script src="js/filters.js"></script>
<script src="js/controller.js"></script>

in app.js:

app.run(function() {
    FastClick.attach(document.body);
});

This was simpler than I thought; I anticipated having to modify some angular directives, but it turns out that this is just a drop-in library. I included it before my angular library and saw instant results in my phonegap application (after calling new FastClick per the fastclick documentation).

So far, I can't find any downsides to this method. I thought that there might be some issues with the document.ready-type setup call (instead of something more integrated into Angular), but there don't seem to be any timing issues or anything.

Worth noting for anyone who stumbles onto this question - I'm only using the tap functionality; I believe that fastclick exposes some extra functionality that I'm not using for this project.