Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • $ionicGesture service in ionic framework

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 364
    Comment on it

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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: