How to controll ui-sref direction in ionic

I’m using Ionic and Angular JS to make a mobile application, using the UI-router for the purpose of routing between views.

I have a tiny problem which I’m not able to find a solution for.

Let me explain my app.

For all my views I have only one state named tab you can see that in the demo i’m providing, and I’m using ui-sref to change between views.

In the second view, I have inside another ion-nav-view with a couple of views (view1, view2).

As you can see in the draft below :

Changing between views is working fine, but there is a problem which is direction; for example when I go from the Main_view1 to the Main_view2 and the I change to the Main_view2.view2 and then try to go back, it doesn’t it goes forward and not back which is a problem (views are getting messed up) Here is a demo PLUNKER DEMO + CODE so you can understand my problem better

So the reason it is going “forward” and not “back” is because that view is not it’s back view. You have so many ion-nav-views going on that it is quite confusing. I think you need to restructure your app. You shouldn’t have an <ion-nav-view> inside of an <ion-view> inside of an <ion-content>. I don’t see any reason that you need the app to be this complicated. You also have <ion-nav-view> components with the same name and a <ion-nav-view> that isn’t being used. My recommendation is to have a single <ion-nav-view>, since you aren’t using tabs from what I can see, and then load the main view 1 & 2 into that nav view, and then use an ng-if with a div (instead of using two ion-views) to switch between the two child views. However, I don’t know if there is a reason you need the children pages to be separate views so I’ve modified the plunker to put them both in an ion-nav-view and then add nav-direction='back' to your custom back button (which was your original question). Here is the plunker:

1 Like

Thanks for your response, actually my app is more complicated than that, I just gave an example to make it easier to understand my issue, in the main app I have Four tabs, a state for each tab, and then each tab can have different views, but in some cases I have a view (ion-view) which can contains another changing views so that’s why I’m using ion-nav-view inside ion-view, do you recommend anything else to have the same transition between the subviews when using ng-if.

Anyway that solved my issue, I’m not sure if this is a dirty way doing it, and what about the black background when the subview is appearing ?

Thanks again for your help, I will finish soon making an awesome application, I would be glad to share it with you.