search

rpocklin / ui-router-tabs

Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router
Other
244 stars 57 forks source link

Default tab or route #51

Closed ghost closed 8 years ago

ghost commented 8 years ago

I've read this paragraph a few times - looked through the sample code but can not understand what this is telling me to do.....

UI Bootstrap Tabs will not select a tab by default. If you want it to, specify the target sub-route when you show the tabs (ie. link the ui-view containing the tabs with the default (first) element as the sub-route example/#/user/settings in the example.)

Would it be possible to provide a small sample code?

bbodenmiller commented 8 years ago

+1

rpocklin commented 8 years ago

I can add something in, but i'm not sure how else to explain it :)

If you have tab routes of /user/settings/1 and /user/settings/2 if you have a link in another view pointing to .../1 or .../2 it will load the tab view with the right sub-view and the tab highlighted. So just put the link for the default route you want to use into the place that navigates to it (either $state.go or ui-sref etc).

rpocklin commented 8 years ago

Closing due to inactivity.

farnsy commented 7 years ago

Just thought I'd try to provide some clarity here as I've been puzzling over it for some time - really just rewording your statement - now that it's working I can see how your statement makes sense, but hindsight is only so useful before you have it. .

I've just been retrofitting ui-router-tabs into an existing app with manually constructed tabs.

I have an app that has a state & view with user functionality (let's call it user), and a state & view with administration functionality - the administration view previously had manually constructed tabs in it, the first one being User Management. In my app, a user would click on an "Administration" menu item, which would navigate to the administration state, loading all of the manual tabs, and setting User Management to visible (all manually - no states involved yet). When I retrofitted ui-router-tabs into this, creating subroutes/states for all of my child tabs, I had the same problem - no default tab.

To solve this, I needed to modify my "Administration" menu item so that instead of navigating to the administration state, it navigated to the administration.userManagement state. This then loaded the administration view with the tabs, and also loaded the first tab.