$ionicGesture not working on device or emulator


#1

Hey, I’m struggling to use $ionicGesture in my app. It works perfectly fine in my browser, however will not work inside the emulator (iOS) or physical device (Android 4.4.2)

My code is something along these lines:

.directive('detectGestures', function($ionicGesture) {
  return {
    restrict :  'A',
    link : function(scope, elem, attrs) {
      var gestureType = attrs.gestureType;
      $ionicGesture.on('swipeup', scope.swipe, elem);
      $ionicGesture.on('swipedown', scope.swipe, elem);
    }
  }
})

and inside the controller I have a simple alert

 $scope.swipe = function(event)  {
      alert("test");
   }

html template is something like this

<ion-slide-box>
    <ion-slide>
       <div class="background" detect-gestures>
       </div>
    </ion-slide>
 </ion-slide-box>

Any suggestions? Thanks!


#2

I’ve done some more debugging and noticed the following error when running on the device:

Error: [$injector:unpr] Unknown provider: aProvider <- a <- detectGesturesDirective
http://errors.angularjs.org/1.2.17/$injector/unpr?p0=aProvider%20<-%20a%20<-%20detectGesturesDirective
at file:///android_asset/www/scripts/vendor.js:1:675
at file:///android_asset/www/scripts/vendor.js:1:17101
at Object.c [as get] (file:///android_asset/www/scripts/vendor.js:1:16366)
at file:///android_asset/www/scripts/vendor.js:1:17196
at c (file:///android_asset/www/scripts/vendor.js:1:16366)
at Object.d [as invoke] (file:///android_asset/www/scripts/vendor.js:1:16651)
at file:///android_asset/www/scripts/vendor.js:1:21257
at Array.forEach (native)
at f (file:///android_asset/www/scripts/vendor.js:1:1005)
at Object. (file:///android_asset/www/scripts/vendor.js:1:21224)

Just to make sure my directive is loaded I moved it to a separate module

'use strict';
angular.module('my.directives', [])

.directive('detectGestures', ['$ionicGesture', 
	function($ionicGesture) {
	  return {
	    restrict :  'A',

	    link : function(scope, elem, attrs) {
	      var gestureType = attrs.gestureType;
	      $ionicGesture.on('swipeup', scope.swipe, elem);
	      $ionicGesture.on('swipedown', scope.swipe, elem);
	    }
	  }
}]);

Loading the directive in app.js

angular.module('myapp', ['ionic', 'my.controllers', 'my.directives'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
  });
})

Everything works perfectly now both on browser and the device! I hope this might help someone in the future!


#3

Hey there! We actually have our gestures exposed as directives, so they’re much easier than having to implement your own. In case you still need them :smile:

http://ionicframework.com/docs/api/directive/onSwipeUp/


#4

Hey! Thanks for the reply! Yeah I tried those with something like

$scope.onSwipeUp = function() {
  alert("yello!");
};

but that didn’t work and there wasn’t much documentation around those so yeah :wink:


#5

Works for me :smile:


#6

Ok that’s weird… Still doesn’t work for me… Changing your codepen to use on-tap worked but still can’t swipe… Tried Chrome, Canary and Safari…


#7

Very odd… I’m on safari as well.

Chrome and chrome canary works as well…

Are there any errors in your JS console?


#8

nope, no errors… just not doing anything at all


#9

More issues on the same topic - real device seems to struggle identifying the swipe event… Any suggestions here? Maybe there are some tricks I could implement?

I have added logs to see when device gets a swipe event and a touch event - most of my swipes are registered as touches…


#10

Interesting, what device are are you testing on? OS version and such, and are you using the nightly builds?


#11

I’m testing on Android 4.4.2 (Samsung Galaxy S4). I was using beta.6 but tested on the nightly as well - same problem


#12

Ah alright, beta 6 didn’t have the events exposed yet, they were in beta 7 and up


#13

you mean gestures exposed as directives? yep I got them working as well on the device now that I’m on the latest codebase. However it’s still really unresponsive… Sometimes it works fine but most times it doesn’t… Anything you can suggest around this?


#14

Correct, they weren’t exposed as pre-built directives. As for the performance, can you make an issue for this with a codepen example. We can look out whats going on and test it on an actual device.


#15

I’ve tried building your codepan http://codepen.io/mhartington/pen/Aergq and running it on my device - after about a minute I managed to get one alert for swipe up. I guess you could try using that to test on a device


#16

I am also having problems detecting swipe events on both a Nexus 5 and a Galaxy S5. Ionic is detecting swipes about one in 10 or 20 tries. Really frustrating. I have had some experience with JQueryMobile having the same issues with swiping in the new Android releases. The JQM dev team has explained that it is more or less unfixable for them for the time being, pending some updates to Android. See issue here:

I am hoping that there is not a similar issue here, with Ionic.

My markup that is not working very well at all, as referenced above:

<ion-pane style="background: black;" on-hold="fullscreenMenu()"  on-swipe-right="regress();" on-swipe-left="advance();">
    <div class="fullViewDiv" >
            <img src="{{selectedPhoto}}" class="galleryImgFull">          
    </div>
</ion-pane>

Perhaps there is something wrong with the usage?

Marc


#17

FYI - tried with on-swipe directive and it is even worse. 1 success in 50 attempts.


#18

More bad news… I tested the same code with my older Droid Razr MAXX (Android 4.1.2), and all swipe events register properly. These symptoms are exactly the same as the issues described in the above thread for JQuery Mobile.

I’m surprised that more people haven’t been raising the issue of bad swipe detection on Android 4.4.x in Ionic. The strange thing to me is the slide boxes and other modules (like angular-carousel) seem to be detecting touch events just fine on Android 4.4.2.

Any thoughts?


#19

@marcsyp interesting issue from the jqm guys…

Best bet would be to open an issue for this, with examples of your code, and what devices you are using and os versions.

The issue could be in the implementation of the. With the information that you can provide, we can find out whats going on.


#20

Implementation of the… ?

Anyway, I will try to open an issue. Where do I do that? Ionic Github repo?

In the meantime, an FYI… someone has created a shim for the problem with JQM:


Do you think this would be implementable/useful to test in Ionic?