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.


#15

#16

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