Ionic Framework Touch Gestures Example

<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')">

          <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>

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);

});