How can I use $ionicHistory to go back 2 views?

ionic-v1
1

I have figured out how to go back one view to the parent when I click an item on the list:

<ion-item ng-repeat="email in emails" ng-click="goBack()">

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

But if I need to do the same going back 2 views to the grandparent, how may I achieve that? I looked up online, and they mentioned:

var backView = $scope.$viewHistory.views[$scope.$viewHistory.backView.backViewId];
    $scope.$viewHistory.forcedNav = {
        viewId:     backView.viewId,
        navAction: 'moveBack',
        navDirection: 'back'
    };
    backView && backView.go();

but my ionic console tells me $ionicViewHistory is deprecated and I should use $ionicHistory instead. And also, $scope.$viewHistory is undefined

Thanks

1 Like
2

Did you try $ionicHistory.viewHistory() instead of $scope.$viewHistory?

Dont forget to inject $ionicHistory

3

That worked, thanks!

4

You are welcome! :smile:

5

Hey, I just checked, and even though its going to the grand parent view, its actually not popping off the stack of views, but instead going down the view. The reason I know this is because the back button remains (the grandparent view is the root view) and when I click the Back button, it takes me back to the grandchild view.

Really I want it to pop up 2 levels in the stack, not add the grand parent view as the child view, how can I achieve that?

6

You could disable going back at all, maybe that helps you?

$ionicHistory.nextViewOptions({
  disableBack: true
});
1 Like
7

Uhh no, I DO want to go back, the issue is its creating a new view with the grandparent view. I think its because I’m using “view.go()” while in the other case (where I go back only 1 view), I’m using goBack(). Maybe the navAction and navDirection are being able to deliver the hint to the navbar-header?

8

Wondering if goBack() should take a number as an argument and pop that many views? #justathought

But currently I just want it to pop the last 2 views from my stack the same way goBack() pops the previous view from the top of the stack.

9

Viola! Here is the solution, as a service:

.service('goBackMany',function($ionicHistory){
  return function(depth){
    // get the right history stack based on the current view
    var historyId = $ionicHistory.currentHistoryId();
    var history = $ionicHistory.viewHistory().histories[historyId];
    // set the view 'depth' back in the stack as the back view
    var targetViewIndex = history.stack.length - 1 - depth;
    $ionicHistory.backView(history.stack[targetViewIndex]);
    // navigate to it
    $ionicHistory.goBack();
  }
})

And here is some code that looks for a specific stateId :

.service('returnToState', function($ionicHistory){
  return function(stateName){
    var historyId = $ionicHistory.currentHistoryId();
    var history = $ionicHistory.viewHistory().histories[historyId];
    for (var i = history.stack.length - 1; i >= 0; i--){
      if (history.stack[i].stateName == stateName){
        $ionicHistory.backView(history.stack[i]);
        $ionicHistory.goBack();
      }
    }
  }
})

So, just pass one of these in a dependency and it can be used thusly:

  goBackMany(2);
11 Likes
10

Nice! So $ionicHistory.backView only sets the view in the history and you need $ionicHistory.goBack() to actually navigate to it.

That worked, thanks!

11

Thanks for providing the services to make this possible. Though, I’d love to also see this integrated into Ionic core.

12

This is really useful. I have used your service but there seems to be a problem with hardware back button on it. The hardware back button still goes to previous state in history while the backbutton in nav bar works as expected. Any suggestions on how to fix it?

1 Like
13

Use goBack in $ionicHistory

$ionicHistory.goBack([backCount]);

To go back n views use : `$ionicHistory.goBack(-n);
Note : [backCount] available in Ionic 1.0.0 rc5 and later

3 Likes
14

If I wanted to go back to starting transaction how can I achieve that…
Please find my question at Make default back button to transmit to its parent state

15

You can directly go to 2 or many parent state till to get end your stack of $ionicHistory and all you need to do is -->

use

–>> $ionicHistory.goBack(-2) [quote=“debnath, post:1, topic:16176, full:true”]
I have figured out how to go back one view to the parent when I click an item on the list:

<ion-item ng-repeat="email in emails" ng-click="goBack()">

$scope.goBack = function() {
    $ionicHistory.goBack(-2);
  }