ion-nav-back-button is not working with views with parameters

0
votes

I am trying develop an app with ionic-framework and angularJS.

I have used $stateProvider and $urlRouterProvider for navigation among the view. I have ion-nav-back-button on the page, to navigate to previous view in the history.

This is my routing logic,

$stateProvider
      .state('sideMenu', {
          url: "/SideMenu",
          abstract: true,
          templateUrl: "Templates/SideMenu.html",
          controller: 'homeCtrl'
      })
.state('sideMenu.relations', {
         cache: true,
         url: "/Relations/:id",
         views: {
             'contentView': {
                 templateUrl: "Templates/Relations.html",
                 controller: "relationCtrl"
             }
         }
     });
 //only required navigation is shown here
  $urlRouterProvider.otherwise("/SideMenu/Suggestions");

My problem is, ion-nav-back-button works Okay for the view without parameters. But if I go ahead of the view having parameter, it won't come back on the view in the history. Instead it goes to default page.

For example, If go to next view from "Relation.html" view, which is having "id" as parameter, On next view I can see back-button. But If I click on that button it brings me to default page "Suggessions.html" instead of "Relation.html".

EDIT

$ionicHistory.goBack();

This code to go back using $ionicHistory is also not working. That means views with parameters not getting added to the History.

Can anyone suggest me, what should I do with views with parameter to be added in history?

2
javascriptangularjsionic-framework

2 Answers

0
votes

Put only ":id" in url param. Like this:

.state('sideMenu.relations', {
     cache: true,
     url: "/:id",
     views: {
         'contentView': {
             templateUrl: "Templates/Relations.html",
             controller: "relationCtrl"
         }
     }
 });
0
votes

from the documentation http://ionicframework.com/docs/api/directive/ionNavBackButton/

With custom inner markup and custom click action, using $ionicHistory:

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-clear"
    ng-click="myGoBack()">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

The controller code

function MyCtrl($scope, $ionicHistory) {
  $scope.myGoBack = function() {
    $ionicHistory.goBack();
  };
}