Time will come when you would need to provide touch gestures over some elements in your application. Or you would want to initiate particular action when application page is swiped or pinched.
 
While AngularJS provides only a few basic touch events, Ionic Framework provides much more than that (hold, tap, double-tap, dragging events, swiping events). These events are available to you at any point and in any case. Though some Ionic Framework directives, like Slide Box, already have integrated touch gestures.
 
Before we can start, you need to know that two possible approaches are available. In the first case, you can add events directly to directives, skipping non-necessary JavaScript coding. Or you can add them programmatically in application JavaScript code. This article will show you how to do this in few simple steps.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins ...

Intro

 
Easiest way of using touch gestures is to add them directly to a directive, like this:
 
<button on-touch="onTouch()" class="button">Test</button>
 
$scope.onTouch = function() {
    // Do something on touch
}
 
Another way requires only JavaScript though some of you may dislike it because it requires a DOM access:
 
var element = angular.element(document.querySelector('#content')); 
  
$ionicGesture.on('tap', function(e){
  $scope.$apply(function() {
    console.log('Tap');
    $scope.gesture.used = 'Tap';
  })    
}, element);
 

Example

 
A short walk through, when this example initializes try any touch gesture inside a page content and see what would happen.
 
Demo
 

Embedded working example

 
Ionic Framework Pull To Refresh Example
 

HTML:

<html ng-app="starter">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="script.js"></script>
</head>
 
<body>
  
  <ion-nav-bar class="bar-positive"></ion-nav-bar>
  
  <ion-nav-view></ion-nav-view>
  
  <script id="home.html" type="text/ng-template">
    <ion-view view-title="Touch gestures example">  
    
      <ion-content class="padding"
                   id="content"
                   on-swipe-up="onGesture('Swipe Up')"
                   on-swipe-right="onGesture('Swipe Right')"
                   on-swipe-down="onGesture('Swipe Down')"
                   on-swipe-left="onGesture('Swipe Left')"
                   on-hold="onGesture('Hold')"
                   on-double-tap="onGesture('Double-Tap')"
                   scroll="false">

          <h2 style="text-align: center;">Use any touch gesture on this page</h2> 
          <h2 style="text-align: center;">Used touch gesture: {{gesture.used}}</h2>  
   
      </ion-content>
      
    </ion-view>
  </script>  

</body>
 
</html>

JavaScript:

var nameApp = angular.module('starter', ['ionic']);

nameApp.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    });
  $urlRouterProvider.otherwise("/");
 
});


nameApp.controller('HomeCtrl', function($scope, $ionicGesture) {
  
  $scope.gesture = {
    used: ''
  };  

  $scope.onGesture = function(gesture) {
    $scope.gesture.used = gesture;
    console.log(gesture);
  }

  var element = angular.element(document.querySelector('#content')); 
  
  $ionicGesture.on('tap', function(e){
    $scope.$apply(function() {
      console.log('Tap');
      $scope.gesture.used = 'Tap';
    })    
  }, element);

});
 

Walkthrough

 
There’s nothing unique or complex about this example.
 
The first solution uses event binding inside a directive:
 
<ion-content class="padding"
             id="content"
             on-swipe-up="onGesture('Swipe Up')"
             on-swipe-right="onGesture('Swipe Right')"
             on-swipe-down="onGesture('Swipe Down')"
             on-swipe-left="onGesture('Swipe Left')"
             on-hold="onGesture('Hold')"
             on-double-tap="onGesture('Double-Tap')">
 
Here you can find a full list of all available events. You can, of course, use a separate function for every event.
 
Second solution is a pure JavaScript one:
 
var element = angular.element(document.querySelector('#content')); 
  
$ionicGesture.on('tap', function(e){
  $scope.$apply(function() {
    console.log('Tap');
    $scope.gesture.used = 'Tap';
  })    
}, element);
 
$scope.$apply is needed to start a scope variable update when an event triggers. If you want to remove an event programmatically just use off method.
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Sandra

    On this particular example, the double tap isn’t working (it’s recognizing it as a tap). How do you get the double tap to work when the object also has a watcher on the tap function?

    • It’s not working because I override it with this code snipet:

      $ionicGesture.on(‘tap’, function(e){
      $scope.$apply(function() {
      console.log(‘Tap’);
      $scope.gesture.used = ‘Tap’;
      })
      }, element);

      Unfortunately, changes done one year ago removed 300ms click delay from Ionic applications. I’m saying its unfortunately because now application can’t correctly detect tap/double-tap on the same element. Both of them will trigger.

  • Raghu A

    Thank you once again for a great tutorial.

  • Bla

    do you guys happen to know the difference between “ionic.Gesture” and “event types”?

  • Hi my friend! One question, is possible to prevent the ionic gesture? 😮