Side Menu and Navigation: strange behavior of state handling

ionic-v1
1

Hey, please have a look at http://codepen.io/ionic/pen/QwamEW.
Just click in side menu on different menu items and you will see, content view is changed without any transition and the menu button at the top left corner persists.

If you use now the back and forward button of your browser to switch between the same states you switched before by clicking side menu items, you will see a transition and the back button appears.

Maybe i don’t get the idea behind this, but for me it’s a bug.

If have the same problem in my app.
I have 2 side menu items linking to state1.substate1 and state1.substate2. Clicking on them works fine. No transition, menu button persists.
I have a button in a template used in state1.substate1 linking with ui-sref to state1.substate2 and i get a transition here and a back button appears. But i only want the same behavior from clicking a side menu item here.

Any suggestions?
Thanks!
christoph

2

It is not a bug.
there is a directive at the Sidemenu items:
“menu-close”

Read about it --> it makes sense ;).
http://ionicframework.com/docs/api/directive/menuClose/

Sidemenus are a base/main-navigation in your app. A good approach is that every item is a new context --> so no detail state for the view before. That is why you have no animation, because you are not in a state-tree. you can see it like many trees and any link in the sidemenu is the root of its own tree.

So there is no animation, because you switch contexts/state-trees and not going deeper in a special tree.
You can avoid this - i think good - approach by not using the menu-close directive (but you will get problems with routing and navigating, like creating routing cycles our sometimes there is a backbutton your base views - i guarantee it!).

3

Thanks for your response.

My aim is not to crack the side menu state handling behavior (e.g. enable animation). That’s all fine.

I just want to put a link to a page with the same behavior than a side menu link: no animation, history root. I read your posted ionic-doc, maybe that does the trick:

  $ionicHistory.nextViewOptions({
   historyRoot: true,
   disableAnimate: true,
   expire: 300
  });

  $state.go('state1.substate2');

Tested it right now and it’s exactly what i want.

But, don’t you think it’s a little weird, that if you change a view by clicking a side menu link (no transition, history root, menu button only) is not the same behavior than go back immediately by hitting the back button (transition, menu button and back button)?
Maybe i have to run $ionicNavBarDelegate.showBackButton(false); for each module/view where i definitely want to hide back button (because back button wouldn’t link to anywhere).

4

sorry but i do not understand the part with “go back, transition, menu button and backbuton”. If your routing is correct you should not see back button and menu button at the same time :smile:

Maybe you activated enable-menu-with-back-views ?
http://ionicframework.com/docs/api/directive/ionSideMenus/

5

Hey, thanks again for replying.

I removed extra ion-nav-buttons (menu toggle button) in sub state views and now i don’t have these problems where back button and menu button are shown together accidentally.

1 Like