Angular UI-Router nested tabs, switch and switch back to where we left off

Question

Please look at this Plunk

1. click "Left"
2. click "Link 2" to expand it
3. click "Right"
4. Click "Left" - link 2 is no longer expanded

Question: how can the Left tab "remember" that it was displaying "Link 2" when we tab away from it and then return to it? (I want to do this for the Right tab too, of course)

Please note that I do not want to hack the official Angular (UI-Router, etc) code in any way.

Also, I would like it so that Link 1 gets expanded by default the first time that Left is displayed or selected (with a similar default on Right). But that may be a subject for a separate question?

Answer 1

You can do this pretty easily.

Set up separate states for each tab at the same level

1) Register a $stateChangeSuccess listener on $rootScope. If the to state .includes("left") or .includes("right"), then keep track of the destination state and its stateParams.

2) Register a $stateChangeStart listener on $rootScope. If the to state .is("left") or .is("right"), then prevent the transition directly to the tab state, and then use $state.go to the state/params you saved earlier for that tab.

Have a look at my ui-router fork which implements this. I call it "deep state redirect". https://github.com/christopherthielen/ui-router/blob/issue-894/src/parallelState.js#L32

I made a plunk and integrated the scope listeners and registry from my fork to the root scope in the plunk. Have a look: http://plnkr.co/edit/2EDS21yD6ygI5nHMFu0H?p=preview