Google Now-style ionic-swipeable-cards with collection-repeat


#1

I’ve seen the Tinder-style swipe cards described here

But I’m looking for a simplified version (swipe left/right) that works with collection-repeat I put together a simple codepen based on the ionic-swipeable-cards project, and it works fine with ng-repeat. But the collection-repeat and swipe-card directives clash.

Any ideas on an easy fix?


#2

I got it to work by making the swipeCards directive restrict: 'EA' which allowed me to use it together with collection-repeat.

.directive('swipeCards', ['$rootScope', function($rootScope) {
return {
  restrict: 'EA',
  template: '<div class="swipe-cards" ng-transclude></div>',
  replace: true,
  transclude: true,
  scope: {},
  controller: function($scope, $element) {
    var swipeController = new SwipeableCardController({
    });
    $rootScope.$on('swipeCard.pop', function(isAnimated) {
      swipeController.popCard(isAnimated);
    });

    return swipeController;
  }
}
}])

#3

Here is the codepen for swipeable cards with collection-repeat. But an someone please explain why I cannot just use the ionic on-swipe directives to do the same thing?