Set active state of a tab

1

Hi guys,

How would I set the active state of a tab based on my current route?

For example I have these routes:

/tabs
/tabs/list
/tabs/awesome

Then I have two tab buttons list on the left and Awesome on the right.
When I go to /tabs/awesome I want Awesome to be selected and I want to actually see the ‘Awesome’-state’s content.

Right now when I go to /tabs/awesome the content being rendered is empty (tries to resolve to /tabs/list)
Is this a bug or am I forgetting something?

2

@Robin Can you post a codepen? You should be able to just use ui-sref="tabs.awesome", but I’m having some difficulty trying to understand…(its still early in the morning for me :smile:)

3

@mhartington
Not much time for isolating the issue in a CodePen right now. Might do so tonight. Which part don’t you understand?

4

This is my view though:

<ion-tabs class="tabs-icon-only tabs-energized"
	animation="fade-in-out"
	controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">

	<ion-tab 
		icon-on="icon ion-map" 
		icon-off="icon ion-map"
		ui-sref="main.partners.type.map">
		
		<ion-nav-view name="map"></ion-nav-view>
	</ion-tab>

	<ion-tab 
		icon-on="icon ion-ios7-clock" 
		icon-off="icon ion-ios7-clock-outline"
		ui-sref="main.partners.type.list">
		<ion-nav-view name="list"></ion-nav-view>
	</ion-tab>
</ion-tabs>

Ignore this. Body is too similar

5

So those two tabs are the ones you want to switch between? Is this just the standard ion-tabs structure?

6

@mhartington What is ‘standard’ these days? :wink: :smiley:

I copy / pasted this code from a working example so yeah, I assume it’s ‘standard’.

7

Aint that the truth. I updated this codepen to demonstrate the “standard” way to set up tabs (or until it breaks later today). Like I said, I’m not sure where you’re having issues, so if you get the chance to post a codepen or something, let me know and I’ll take a look at it.

8

@mhartington You’re referencing ‘this codepen’ but I think you forgot the link.

My issue is when I’m opening the /tabs view, all is working fine and the first tab is opened and has an active state
From there on, when I click any of the tabs, everything is working as expected.

But I want to ‘deep link’ to a certain tab. In my example to /tabs/awesome, which is the second (and thus not the default) tab.

Straight from a non-tabbed view I want to link towards /tabs/awesome and have the Awesome tab opened and active. That’s not working now. The more I dig into this the more it seems like an Ionic issue…

Any suggestions @andy?

9

Sorry about that, did I mention its still a bit early for me :smile:

From the main tab, you can navigate to some nested views then navigate to the second tab. You’re description makes a lot of sense, so my apologies for not quite understanding what you wanted.

Does the codepen reflect what you’re trying to accomplish?

10

Not quite there yet. Now try to use that CodePen to open the third tab on page load. Based on the current state.

11

Hmmm, tab.shown should be able to take care of that but it does seem broken

$scope.$on('tab.shown', function() {
    // Maybe load some content here
  });

I tried to use this to change the state and couldn’t even get to write to console.

12

Do you know more about this @Calendee?

13

tab.shown and tab.hidden have been killed. Although tab.shown is still working in some code bases and tab.hidden works one time only in some code bases.

14

@Robin Hmm… try $state.go?

Tabs do need more robust support for matching to states, I think there’s a bug in it right now that I saw yesterday. I’ll open an issue.

1 Like
15
16

Thanks @andy. Will keep an eye on that one :smile: