Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fastclick.js integration with AngularJS

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.

like image 872
jedd.ahyoung Avatar asked Dec 06 '13 15:12

jedd.ahyoung


2 Answers

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);
});
like image 182
Blazemonger Avatar answered Sep 23 '22 19:09

Blazemonger


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.

like image 44
jedd.ahyoung Avatar answered Sep 23 '22 19:09

jedd.ahyoung