How to manipulate navigation


#1

Hi,

I am using ion-nav-view in my application. I want some control over ionic history. For example there are 3 states in my app. State1(root) , State2 and State3. I can navigate to State2 from State1 and to State3 from State2. In normal scenario if i hit back button on State3 then it will return to State2. But i want to skip State2 completely , i.e, State2 is not recorded as back view of State3 instead State1 become the back view of State3. Is there a way to make this possible ??


#2

There is a undocumented ionic service:
$ionicViewService

over that you get access to the ionic history stack.

But if you do not know what you do… it is not recommended.

greetz, bengtler

BTW: the sourceCode:
https://github.com/driftyco/ionic/blob/master/js/angular/service/viewService.js


#3

Thanks @bengtler, I managed to achieve the desired functionality.
But the solution feels like a hack in the system and needs a thorough understanding of how the navigation works in ionic
Shouldn’t be there a easy way to do it.


#4

I think it is okay because you have to keep in mind:

You should have a clear state-hierarchy in your app.
Like -> show navigation animation only if you navigate in a deeper navigation level and so on. (like from a list to a detailview of one item)
If you have a clear state structure and so on, there should be no need to manipulate navigation history.
You have a strong tool with the ui-router and ionic to reach this (abstract states, parent states, nav-back-button, …).

I think it is good that this service is not documented and there is no easier way.
Everyone would hack around in there app without understanding that they maybe make app-architectural mistakes.


#5

@bengtler Could you give an example of how you would tie state-hierarchy into controlling navigation animation and the behavior of the back button? I want to make the back button default to browsing to a parent state and always appear when a parent state is present, but I’m not sure how to make this work.


#6

To hide and show Backbutton you can use:
http://ionicframework.com/docs/api/directive/ionView/
“hide-back-button” on your ion-view to hide it on parent states.

To handle animations simply -> use parent or abstract statest.
The parent state has no transition-animation (like switching level 1 pages, no animation needed here) the parent/abstract state has an own new ion-nav-view where the child states can hang in.
For those pages you can have an animation because you are navigating from level 1 pages to level 2 child pages and back.

greets, bengtler


#7

That makes sense. With the back button, would you hard code it to navigate to the parent state rather than use the navigation stack?


#8

I used both in my apps :slight_smile:

if you can avoid an own handling… avoid it.


#9

@bengtler Thanks for your help. This is what I ended up doing to solve the problem. Hope this helps someone else.