Hello Readers,

$ionicGesture service provides many touch events (  hold, tap,left,right etc) and on the other hand AngularJs ngTouch provides only three touch events (ngClick, ngSwipeLeft and ngSwipeRight). $ionicGesture service makes easy to use touch events.

Here is code snippet to explain $ionicGesture service :

index.html

<ion-view view-title="Gesture detection">
    <ion-content id="contentData" has-bouncing="false">
        <p>$ionicGesture service to drag content up, down, left and right direction.</p>
        <div class="gestureEvent"><p>{{eventCalled}}</p></div>
    </ion-content>
</ion-view>

controller.js

angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope, $ionicGesture) {
    var dragCount = 0;
    var contentElement = angular.element(document.querySelector('#contentData'));
    var gestureEvents = [{event: 'dragup'},{event: 'dragdown'},
    {event: 'dragleft'},{event: 'dragright'}];  
    angular.forEach(gestureEvents, function(obj){
            var dragGesture = $ionicGesture.on(obj.event, function (event) {
            $scope.$apply(function () {
                $scope.eventCalled = obj.event;
                if (obj.event == 'dragup'){ 
                    dragCount++;                          
                    if(dragCount == 1){
                        $(".gestureEvent").css({"background-color":"#f00"});
                    }
                    if(dragCount > 1){
                        dragCount = 0;
                    }
                }
                if (obj.event == 'dragdown'){ 
                    dragCount++;                          
                    if(dragCount == 1){
                        $(".gestureEvent").css({"background-color":"green"});
                    }
                    if(dragCount > 1){
                        dragCount = 0;
                    }
                }
                if (obj.event == 'dragleft'){ 
                    dragCount++;                          
                    if(dragCount == 1){
                        $(".gestureEvent").css({"background-color":"yellow"});
                    }
                    if(dragCount > 1){
                        dragCount = 0;
                    }
                }
                if (obj.event == 'dragright'){ 
                    dragCount++;                          
                    if(dragCount == 1){
                        $(".gestureEvent").css({"background-color":"orange"});
                    }
                    if(dragCount > 1){
                        dragCount = 0;
                    }
                }
            });
        }, contentElement);
    }); 
});

style.css

.gestureEvent{border:1px solid;width: 50%;margin: 0 auto;height: 100px;text-align: center;}

Hope this will help you :)