Back button a previous page

owolabi · September 16, 2015, 9:19am

Please can someone kindly help with these issues.

I am new to ionic,
I have a sidemenu, that opens in the first page called HOME.
This HOME has menu-toggle that toggles to the LEFT-MENU to reveal my list items.
Also, this list items has href that navigates to another page called SECOND page.
Also, this SECOND page has an href that navigates to the THIRD page.

Now, on the THIRD page i would like to navigate back to second, but the Toggle keeps going
to the LEFT-MENU instead of a step back to the second page.

psyche · September 16, 2015, 1:01pm

Hello

If I understand correctly what You are trying to do You should set up Your routing correctly. You can read more on routing in Ionic here . If You want to learn even more You can read about Angular’s UI-router, which is the base for the Ionic’s router (docs are here)

Basically You need to have the THIRD page be the child of the SECOND and then the back button will work as You wish.

Hope that helps!

owolabi · September 17, 2015, 8:51am

Thanks so much for your explanation and the links.
However, i got the routing but since i’m newbie i would have preferred an illustration of parent—child—grandchild routing examples.

Here is the modified sidemenu i got from codepen:

 <!DOCTYPE html>

<title>Side Menus</title>

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

<link href="css/style.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="cordova.js"></script>

<ion-nav-view></ion-nav-view>

<script id="templates/event-menu.html" type="text/ng-template">
  <ion-side-menus enable-menu-with-back-views="false">

    <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>

      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content> 

    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Left Menu</h1>
      </ion-header-bar>
      <ion-content>
        <ul class="list">
          <!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
          <a href="#/event/test" class="item" menu-close>Check-in</a>
        </ul>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>
</script>

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Welcome">
    <ion-content class="padding">
      <p>Swipe to the right to reveal the left menu.</p>
      <p>(On desktop click and drag from left to right)</p>
    </ion-content>
  </ion-view>
</script>



<script id="templates/test.html" type="text/ng-template">
  <ion-view view-title="test 1 page">
    <ion-content>
     
       <a class="item item-icon-right" href="#/event/test2" class="item" menu-close><i class="icon ion-chevron-right icon-accessory"></i></a></div>
        
    </ion-content>
  </ion-view>
</script>

`indent preformatted text by 4 spaces`

angular.module(‘ionicApp’, [‘ionic’])

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state(‘eventmenu’, {
url: “/event”,
abstract: true,
templateUrl: “templates/event-menu.html”
})
.state(‘eventmenu.home’, {
url: “/home”,
views: {
‘menuContent’ :{
templateUrl: “templates/home.html”
}
}
})
.state(‘eventmenu.checkin’, {
url: “/check-in”,
views: {
‘menuContent’ :{
templateUrl: “templates/check-in.html”,
controller: “CheckinCtrl”
}
}
})

.state('eventmenu.test', {
  url: "/test",
  views: {
    'menuContent' :{
      templateUrl: "templates/test.html",
      controller: "testCtrl"
    }
  }
})

.state('eventmenu.test2', {
  url: "/test2",
  views: {
    'menuContent' :{
      templateUrl: "templates/test2.html",
      controller: "test2Ctrl"
    }
  }
})

$urlRouterProvider.otherwise("/event/home");
})

.controller(‘MainCtrl’, function($scope, $ionicSideMenuDelegate) {

$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})

.controller(‘testCtrl’, function($scope) {

})

.controller(‘test2Ctrl’, function($scope) {

})

owolabi · September 17, 2015, 8:55am

HERE IS THE APP.JS

angular.module('ionicApp', ['ionic'])