Add custom gesture to the list's item


#1

Do you know better way to add ‘hold’ gesture to the list items?

Essential parts:

<ion-list>
  <ion-item ng-repeat="item in items" 
            item="item"
            my-on-hold="onItemHold(item)">
    Item {{ item.id }}
  </ion-item>
</ion-list>
.directive('myOnHold', function($ionicGesture) {
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      var handleHold = function(e) {
        $scope.$eval($attr.myOnHold);
      };
      var holdGesture = $ionicGesture.on('hold', handleHold, $element);
      $scope.$on('$destroy', function() {
        $ionicGesture.off(holdGesture, 'hold', handleHold);
      });
    }
  }
})
.controller('MyCtrl', function($scope, $ionicActionSheet) {
  // ...
  $scope.onItemHold = function(item) {
    $ionicActionSheet.show({
      // ...
    });
  }
});

Using Ionic's Built in Gestures
#2

Looks like i’ve just copied it from How to use built-in Ionic/Hammer.js gestures.


#3

As can be seen on External Links to load OUTSIDE of app? it’s necessary to clean handler on scope destroy. Updated accordingly.


#4

why not passing the function in the scope attribute instead?

.directive('myOnHold', function($ionicGesture) {
  return {
    restrict: 'A',
    scope: {
      onHold: '&myOnHold'
    },
    link: function (scope, element, attr) {
      var onHold = scope.onHold;

      var holdGesture = $ionicGesture.on('hold', onHold, element);

      scope.$on('$destroy', function() {
        $ionicGesture.off(holdGesture, 'hold', onHold);
      });
    }
  }
})

#5

Thank you guys. It is nice~
I am looking for such a gesture.


#6

Why doesn’t Ionic just provide all the gestures as standard directives out of the box? Every ui-framework does this.


#7

This is awesome. I implemented this in my project and it’s working great, however with a few little problems:

  1. It appears that the taphold directive also allows a click event to be fired. This is a problem for a number of reasons, because I’m using the taphold on checkbox elements and on assets that also have click handlers. Is there a way to prevent the click from firing on a myOnHold event?
  2. The taphold threshold is just a little too long for me. Is there a way to set the taphold threshold? (As in (dare I say it) JQMobile, you can set the threshold to 200ms, or whatever you want…)

Thanks for the code!

Marc


#8

i am struggling on swipe the task get left and right directions to pass the left swipe task move to q1 page and right swipe move q2 page.q1 page has task move to right and left other page . using ionic gestures it is possible or not .help me
sorry for my bad english