touch - イオンフレームワークのスワイプディレクティブ?

Question

ionic にはスワイプやその他のイベントのディレクティブがありますか?
このサービスを見つけました: $ionicGesture。これで独自のディレクティブを作成する必要がありますか?

または、ngTouch のような別のものを使用する必要がありますか?

Answer 1

すぐに使用できるスワイプ ディレクティブはありませんが、イベントが公開されているため、何かをまとめるのは非常に簡単です。

.directive('detectGestures', function($ionicGesture) {
  return {
    restrict :  'A',

    link : function(scope, elem, attrs) {
      var gestureType = attrs.gestureType;

      switch(gestureType) {
        case 'swipe':
          $ionicGesture.on('swipe', scope.reportEvent, elem);
          break;
        case 'swiperight':
          $ionicGesture.on('swiperight', scope.reportEvent, elem);
          break;
        case 'swipeleft':
          $ionicGesture.on('swipeleft', scope.reportEvent, elem);
          break;
        case 'doubletap':
          $ionicGesture.on('doubletap', scope.reportEvent, elem);
          break;
        case 'tap':
          $ionicGesture.on('tap', scope.reportEvent, elem);
          break;
      }

    }
  }
})

このデモをチェックしてください

Answer 2

Ionicframework と AngularJS でそれを行う方法を説明する素晴らしいチュートリアルがあります http://ionicframework.com/blog/ionic-swipeable-cards/

基本的に、以下のスニペットのように Ionicframework オブジェクト/関数を使用してビューを作成し、それを呼び出すディレクティブを作成します。チュートリアルで詳細を参照してください。

var SwipeableCardView = ionic.views.View.inherit({   
    initialize: function(opts) {
    // Store the card element
    this.el = opts.el;
    this.bindEvents();
},
bindEvents: function() {

    var self = this;

    ionic.onGesture('drag', function(e) {
       // Process drag
    }, this.el);

    ionic.onGesture('dragend', function(e) {
       // Process end of drag
    }, this.el);
},