Creating new history stack

ionic-v1
1

Hi all, I’m not sure the title is right but here is the scenario;

1- ( back button points to Search View) User clicks to checkout button on an Item
2- If user is not verified , Multi step registration - verification comes in (there is no back button)
3 -Verification part1 (there is no back button)
4 -Verification part2 (there is no back button)
…
7 - Verification complete button clicked , then user returned to first step ( back button points to Search View)

I tried to make the verification part with abstract state, it didn’t worked. Also tried to find and preserve the history stack for checkout page It didn’t worked too.

I’m wondering is there a way to create a seperate history stack and when the job is done, clear this new stack and return to the original history. Or going back in history until a specific state without noticed to user.

Here is the representation of history stack that i wanted

A - B - C
               \
               D - E - F
                          /
             A - B - C - G - H

Thank you!

2

Basically, you solution consists of two parts: 1) not showing the back button / allowing them to go back and 2) when they are done, returning to the correct stage.

  1. Per http://stackoverflow.com/questions/26868208/conditionally-hide-menu-button-in-ionic-framework-outside-ion-view#answer-26878149 , add the attribute of hide-back-button and set it to true:

Apparently, that informs the header to hide be back button.

  1. On the last screen, you need to go to the correct state.If the verification sequence is always the same length, you can just go back that many states in history. :

    .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 state name :

.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();
      }
    }
  }
})

You should be able to call either of these services to do it. Example usage from your outline would be:

  goBackMany(5);

Since it looks you have 5 screens in your verification sequence.

The only caveat that I have with this is that I think the back button would still work in the browser and on android. I think. I haven’t tested.

7 Likes
3

That’s great! I never thought that we can set backView manually. thank you very much!