Material: md-tabs: md-active does not work well with child states

[epelc]

If you are using md-tabs with ui-router states and rendering your states content outside of the tabs they do not work well together.

It requires custom logic to check the current state on a refresh and change the md-active attribute. This works fine if your tabs just have one state per tab. But if they have child states and you refresh the page the ui-sref's click handler is called and your taken to the parent state.

Code calling the click handler no matter what
https://github.com/angular/material/blob/master/src/components/tabs/js/tabsController.js#L292-L294

Example

<md-tabs md-stretch-tabs="always" class="md-accent md-hue-3">
    <!-- isActive() checks if the current state includes the given state name. -->
    <md-tab label="Tab 1" md-active="isActive('tab1')" ui-sref="app.some.state.tab1"></md-tab>
    <md-tab label="Tab 2" md-active="isActive('tab2')" ui-sref="app.some.state.tab2"></md-tab>
    <md-tab label="Tab 3" md-active="isActive('tab3')" ui-sref="app.some.state.tab3"></md-tab>
</md-tabs>
<!-- Tab content is rendered here -->
<div ui-view></div>

Now say you went to app.some.state.tab2.someChildState and refreshed. You would load the child state then because md-active always calls the click handlers it will send you to the parent state(app.some.state.tab2).

I'm currently trying to find a good way to fix this. I think making md-active not fire the click handlers and having people use the md-on-select/deselect attributes to register their handlers may work well. But I'll wait for a bit of feedback and see if I come up with anything better(I'm not quite sure if this will break tons of apps, I suspect it won't but still).

[aeby]

I've created a small directive as a possible workaround.

[epelc]

I think you have a different problem and could just use a regular
'md-active' for that.

This issue is that when you use 'md-active' and you load a child state it
will activate the parent state for the tab and send you back to that. See
my pr for a way to fix this.

On Thursday, January 28, 2016, Reto Aebersold [email protected]
wrote:

I've created a small directive
https://gist.github.com/aeby/7eca5db3f82075de31cd as a possible
workaround.

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/5351#issuecomment-176496274.

Thank you,
Ed Pelc

[aeby]

Yes, that was exactly my problem. My directive does not emit the click event triggering this behaviour - it just sets the selectedIndex. It is not intended as a fix but as a workaround until your PR is merged.

[epelc]

@aeby Ahh I see what you did(updating the index directly on the tabs controller bypassing the regular index updater which creates the click events). Was on my phone before and didn't comprehend what you were doing entirely.

I'd still like the PR to be merged so we don't have too stay up2date with md-tabs internals. I think child views are also common enough to warrant merging this.