Css Ionic Tinder卡2将卡返回到堆栈的末尾

我正在使用Ionic应用程序中创建一组“swipebale”卡。 我想对它做一些修改

现在我有这个：

1） 我想反转隧道视图“向上”而不是“向下” 2） 我希望每一张刷卡都能在堆栈的末尾返回（而不是丢弃）

如果有人能告诉我从哪里开始。 我更改了“放弃”功能：

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

更新

这是整个控制器：

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

---

所以，当你使用爱奥尼亚的手势时，你需要应用他们自己的指令

在HTML中，您需要用爱奥尼亚的手势替换

ng向左滑动

：

像这样：

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

放弃

---

这将使用ionic定义的手势

我不知道如何反转通道视图，但下面是如何返回堆栈末尾的每张卡，而不是丢弃它。希望这至少有帮助

$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);

  };

---

您看到了什么错误，看起来您将整个卡对象作为引用而不是索引传递。。使用

ng swipe left=“cardSwipedLeft（$index）”

instead我得到了“手势未定义”你需要安装

ngTouch

模块：我用错误登录更新了我的帖子。仍然不工作我仍然有上面图片中提到的相同错误。只有第一张卡被刷卡。在那之后，是“手势未定义”你还附加了哪些手势？也许你有一个

ng右击

浮动？我将整个控制器添加到我的帖子中

    .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) {

});

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

$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);

  };