How to controll ui-sref direction in ionic


#1

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


#2

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: http://plnkr.co/edit/uSvo3TFZAVDYBE1cCfcY?p=preview


#3

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.