md-tabs: md-active does not work well with child states #5351
Description
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).