I am creating a dashboard / control panel application, which basically consists of two tabs (bootstrap) at the root level, called "send" and "admin". Each tab has a good bit of its own layered navigation and functionality, and they don’t need to interact directly with each other. The problem I am facing is how to deeply link the subviews on one of the tabs without losing the “state” of the inactive tab. To clarify, I can achieve this just fine, if I'm not worried about updating the URL, but when I try to add a deep link, this is when I get stuck.
An example of the desired behavior:
- When you click on the admin tab, the route becomes
"/admin" - Click the sub-navigator item, the route will become
"/admin/foo" - Select a sub-level element of the third level, the route will become
"admin/foo/thing1" - Go to the "Sending" tab, the route will become
"/dispatch" - Go back to the admin tab, the route will return to
"admin/foo/thing1"
So basically, if you are on a path "admin/foo/thing1"in the middle of filling a text field, then switch to another tab and then go back, the text field should stay there as soon as you left it.
As I said, the problem is not switching from tab to tab, because by default tabs just show and hide things on the page without reloading any views dynamically. I just don’t know how to get deeply attached to a given tab “bookmark” when you switch to it. The way I think about this all the time is that clicking on a tab should update only the first segment of the URL ( /adminor /dispatch), and then some kind of $ watch function will update the remaining segments based on the last "location" on this tab. Will there be something like that?
In addition, I use ui-router to handle all my routes and states, so I have to take this into account in how I will handle the desired behavior.
reference