Ionic swipe back gesture enable

Question

I have the following code:

personal-info.html

<ion-view view-title="Personal Information" can-swipe-back="true">
  <ion-nav-buttons side="left">
    <button class="button button-icon icon  ion-ios-arrow-left" ng-click="doTheBack()" nav-direction="back"></button>
</ion-nav-buttons>
  <ion-content class="padding">
    <div class="list card">
      <div class="item item-divider">Recent Updates</div>
      <div class="item item-body">
        <div>
          There is a fire in <b>sector 3</b>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

and my controller

.controller('PersonalInfoCtrl', function($scope) {
  $scope.doTheBack = function() {
  window.history.back();
};
});

I want to enable the swipe back feature I tried by putting can-swipe-back="true" inside <ion-view> tag but it didn't help at all. Also I have checked a lot of documentation as well as this question How do you "Swipe to go back" in Ionic? but it seems that swipe back feature is not enabled for my application.

MashterYoda MashterYoda · Accepted Answer · 2015-08-05T00:23:42

The way I implemented it was through $ionicNavBarDelegate. In HTML:

<ion-view view-title="Personal Information">
  <ion-content on-swipe-right="swipe('right')" class="padding">
    <div class="list card">
      <div class="item item-divider">Recent Updates</div>
      <div class="item item-body">
        <div>
          There is a fire in <b>sector 3</b>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

In controller:

$scope.swipe = function (direction) {
                 if(direction == 'right') 
                   $ionicNavBarDelegate.back();
               }

Make sure to include $ionicNavBarDelegate in your controller header.

If that doesn't work, take a look at http://forum.ionicframework.com/t/any-sample-code-on-how-to-use-swipe-to-go-back/19122/13. Swipe-to-go-back seems to work by default since RC0 as demonstrated by http://codepen.io/mhartington/pen/RNqpJp.

Ionic swipe back gesture enable

1 Answers