Ionic Tinderカード2スタックの最後にカードを返す

Question

this code penを使用して、私のIonicアプリケーションで「swipebale」カードのスタックを作成しています。 私はそれにいくつかの変更を加えたいと思います。私は 2）私は、それぞれの終わりに戻すためにカードをスワイプしたい代わりに「ダウン」の「アップ」トンネルビューを逆にしたい）

1：

今、私はこれを持っていますスタック（破棄されるのではなく）。

誰かが私にどこから始めたらいいか分かります。これに

   <div class="discard" ng-click="onClickTransitionOut(card)">DISCARD</div> 
      <img ng-src="{{ card.image }}"> 
     </div> 
     </td-card> 

： は、私が "廃棄" 機能に変更

<div class="discard" ng-swipe-left="cardSwipedLeft(card)">DISCARD</div> 
      <img ng-src="{{ card.image }}"> 
     </div> 

をしかし、スワイプは動作しません。

<ion-pane ng-controller="CardsCtrl" class="background-grey"> 

    <!-- ************************* 
    TD Cards 
    - We start off with an ng-if so that the cards are not generated 
     unless $scope.cards is not 'null' 
    ************************* --> 
    <div> 
    <td-cards> 
     <td-card ng-repeat="card in cards.active" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)"> 
     <div class="image" ng-controller="CardCtrl"> 
      <img ng-src="{{ card.image }}"> 
     </div> 
     </td-card> 

    </td-cards> 
    </div> 

</ion-pane> 

そしてJS

： そして、私はここでUPDATE

が全体のコントローラである。この

 $scope.$on('removeCard', function(event, element, card) { 
    var discarded = $scope.cards.master.splice($scope.cards.master.indexOf(card), 1); 
    $scope.cards.discards.push(discarded); 
    }); 

    $scope.cardSwipedLeft = function(index) { 
    console.log('LEFT SWIPE'); 
    var card = $scope.cards.active[index]; 
    $scope.cards.push(card); 
    }; 
    $scope.cardSwipedRight = function(index) { 
    console.log('RIGHT SWIPE'); 
    var card = $scope.cards.active[index]; 
    $scope.cards.push(card); 
    }; 

}) 

にremoveCard機能を変更しました

.controller('CardsCtrl', function($scope, TDCardDelegate, $timeout) { var cardTypes = [ { image: 'img/cards/ASE card.png' }, { image: 'img/cards/EDP card.png' }, { image: 'img/cards/R2A card.png' }, { image: 'img/cards/WTR card.png' }, { image: 'img/cards/RRH card.png' }, { image: 'img/cards/Staffing.png' }, { image: 'img/cards/Intercontrat.png' } ]; $scope.cards = { master: Array.prototype.slice.call(cardTypes, 0), active: Array.prototype.slice.call(cardTypes, 0), } $scope.cardDestroyed = function(index) { $scope.cards.active.splice(index, 1); }; $scope.addCard = function() { var newCard = cardTypes[0]; $scope.cards.active.push(angular.extend({}, newCard)); } $scope.$on('removeCard', function(event, element, card) { $scope.cards.push(card); }); $scope.cardSwipedLeft = function(index) { console.log('LEFT SWIPE'); var card = $scope.cards.active[index]; $scope.cards.push(card); }; $scope.cardSwipedRight = function(index) { console.log('RIGHT SWIPE'); var card = $scope.cards.active[index]; $scope.cards.push(card); }; }) .controller('CardCtrl', function($scope, TDCardDelegate) { }); 

Answer 1

したがって、イオンのジェスチャーを使用しているときは、独自の指令を適用する必要があります。

あなたは、イオンのジェスチャーに ng-swipe-leftを交換する必要があり、あなたのHTMLで

：そうのようOnSwipe

：

<div class="discard" on-swipe-left="cardSwipedLeft($index)">DISCARD</div> 
      <img ng-src="{{ card.image }}"> 
     </div> 

これは、イオン性によって定義されたジェスチャーを使用します。

Answer 2

トンネルビューを逆にする方法はわかりませんが、各カードを廃棄する代わりにスタックの最後に戻す方法は次のとおりです。少なくともこれが役立つことを願っています。

$scope.cardDestroyed = function(index) { 
    var loTopCard = $scope.cards.active[index]; 
    $scope.cards.active.splice(index, 1); 
    console.log('Card Count after Remove ' + $scope.cards.active.length); 
    $scope.cards.active.push(loTopCard); 
    console.log('Card Count after add ' + $scope.cards.active.length); 

    };