ui-sref on md-tab no longer works

[seiyria]

This used to work in 0.8.0:

      md-tabs.is-flex.auto-flex.md-accent(md-selected="selectedIndex",layout="column")
         md-tab(ui-sref="player.overview",label="Player")
            div.tab(ui-view="overview")

It no longer works as of 0.9.0-rc1. It seems extra attributes are being stripped off of these directives.

[sunny9240]

+1

[DBGTTECHJAM]

Yes we are having same issue since upgrading to 0.9.0-rc1. This fix is necessary for Tabs with external view content to work.

[ThomasBurleson]

@DBGTTECHJAM - agreed. Support for external view content is very important.
@seiyria - Please provide a CodePen or Plunkr that demonstrates this issue.

[em2labs]

I am able to replicate the problem as well. I created a plunker to replicate the problem:

http://plnkr.co/edit/t0QmjueSGcNfFLG8U0n2?p=info

I first got it working with angular-material 0.8.3 and then switched to 0.9.0-rc1 in order to replicate the issue. This is my first time getting involved so please let me know if additional info is necessary... and thank you for the great libraries.

[FelAmine]

+1

[epelc]

+1

The following use to work quite nicely

<md-tab label="Something cool" ui-sref="something.cool"></md-tab>

But now I have to use the following(note the ui-sref must be on an element within md-tab-label`

<md-tab>
    <md-tab-label><span ui-sref="something.cool">Something cool</span></md-tab-label>
</md-tab>

[seiyria]

+1 for the workaround. Guess I'll have to go with that for now.

[em2labs]

Thanks for the workaround.

[eclipse1985]

+1

[loykianos]

you can also try adding something like { padding: 15px; margin: -15px; } on the label so that the lnk works for the whole tab and not only the text. yeah, don't judge me.

[ThomasBurleson]

@loykianos - LOL.
RE don't judge me > We don't... thank you for the interim workaround.

[averas]

Side note: The workaround does not solve keyboard navigation.

[dohomi]

+1 for making tabs work with any route persistancy that a user would open a specific tab on historyBack()

[JNissi]

+1

[gpopovic]

+1

[rosinghal]

i am using this code.

<md-tabs>
   <md-tab md-on-select="$state.transitionTo(state1, params1)"><md-tab-label>Label1</md-tab-label></md-tab>
   <md-tab md-on-select="$state.transitionTo(state2, params2)"><md-tab-label>Label2</md-tab-label></md-tab>
</md-tabs>
<div ui-view></div>

Its working fine, till now.

[ThomasBurleson]

@rosinghal - can you provide a CodePen that we can quickly use to test and validate fixes?

[ask007learning]

+1

[ismarslomic]

+1

[rosinghal]

@ThomasBurleson : Here it is http://codepen.io/rosinghal/pen/waGozW & http://codepen.io/rosinghal/pen/JdXbMz

[bastienJS]

When you try to activate a state "settings" via a navbar button then the "settings" Tab is not activated. I have extra to click on that Tab. This should be fixed too.

And the workaround from @epelc does NOT work see the plunker with latest version 0.9.4

http://plnkr.co/edit/kmQh5tWiMM3em5zgbB4a?p=preview

[tazmon95]

Thanks for the workaround!!!

[JNissi]

@bastienJS: It seems your ui-view structure is not working for some reason. I simplified your plunker by removing the named views inside the tabs and the workaround by @epelc works just fine: http://plnkr.co/edit/WVsbSHfplx82FXywYq2G

[xsegrity]

@osuritz is right about the keyboard navigation not syncing when using ui-sref. His proposed fix works as well. I am having the same problem. Going to open a separate issue since this one is closed already.

[ThomasBurleson]

@robertmesserle: see @osuritz comment above ^^.

[MileanCo]

I was able to fix this by using ng-click and then changing the $location with a function:

md-tab ng-click="goToTab(currentTab)" label="Profile"

  $scope.goToTab = function (tab) {
              $location.url("/dashboard/profile");

With:

// Set 'selectedTab' for highlight/underscore [DOES NOT CHANGE STATE]
    $scope.$on('$stateChangeSuccess', function (event, toState) {
      $scope.currentTab = toState.data.selectedTab;
    });

And route .state data:

data: {
            'selectedTab': 0,
          },

[invincibledudess]

I am facing the same Keyboard navigation issue (The tab content does not change with keyboard 'enter'/'space' with 'ui-sref'). No workaround is working for me as well. Any updates as to when will this be fixed?

[timc13]

+1