On-swipe event not funtctioning

ionic-v1
1

Hello,

Frustration overload.
I have attached a console.log message with each of the following <td-card> events:

on-destroy="cardDestroyed($index),
on-swipe-left="cardSwipedLeft($index)"
on-swipe-right="cardSwipedRight($index)"

These template markup contains these events:

<td-cards >
            <td-card  ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)"
                      on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)"
                      class="card-{{$index}}">
                <!--ng-controller="CardCtrl"-->
                <div class="image">
                    <div class="no-text">
                        <img class="img" src="img/dislike.png"/>
                    </div>
                    <img class="swipeImg" ng-src="{{card.image}}">
                    <div class="yes-text">
                        <img class="img" src="img/like.png"/>
                    </div>
                </div>
            </td-card>

The controller looks like this:

.controller('CardsCtrl', function($scope, TDCardDelegate) {
    console.log('CARDS CTRL CALLED');
    var cardTypes = [
        { image: 'img/movies.jpg', title: 'Movies'},
        { image: 'img/comedy.jpg', title: 'Comedy'},
        { image: 'img/technology.jpg', title: 'Technology'},
        { image: 'img/news.jpg', title: 'News'},
        { image: 'img/entertainment.jpg', title: 'Entertainment'}

    ];

    $scope.cards = Array.prototype.slice.call(cardTypes, 0);

    $scope.cardSwipedLeft = function (index) {
        console.log("LEFT SWIPE");
        $scope.addCard();
    };

    $scope.cardSwipedRight = function (index) {
                console.log("RIGHT SWIPE");
                $scope.addCard();
            };


    $scope.cardDestroyed = function(index) {
        $scope.cards.splice(index, 1);
        console.log("Card Destroyed!");
    };

    $scope.addCard = function() {
        var newCard = cardTypes[(cardTypes.length)+1];
        $scope.cards.push(angular.extend({}, newCard));
        console.log("New card added!");
    };

The following scripts are included in index.html:

<script src="lib/collide/collide.js"></script>
<script src="lib/ionic-contrib-tinder-cards/ionic.tdcards.js"></script>

The 'ionic.contrib.ui.tinderCards' dependency is injected into app.js.

RESULT: Chrome Canary console:

CARDS CTRL CALLED
CARDS CTRL CALLED
5 Card Destroyed!

Each time a card is swiped, Card Destroyed! is logged to the console.
However, the direction of the swipe is not registering and I cannot figure out why.
I have tried replacing on-swipe-left / on-swipe-right with ng-swipe-left/ng-swipe-right but nothing changes.

Am I missing something?

2

I had a blogpost about the general usage of Tinder Cards on Nic Raboys blog. However, I experienced the same behaviour like you and wrote an additional article describing how to optimize the use of Tinder Cards. That includes registering for another event:

on-transition-left="transitionLeft(card)"
on-transition-right="transitionRight(card)"

On this way you should definitely get the event to which side the card was dragged/slided!

3 Likes
3

Yes, I came across your tinderstyle blogpost and had a look at the Heroku example but had not found the link above. The issue with this UI is that the card is not always swiped forcefully and because of this is often not registered as a swipe, yet the card is destroyed. This solves my problem. Many thanks for this simple solution and replying to my post :slight_smile: