md-tabs - should support ng-show and all other ng attribs.

[rosscdh]

a few nice fixes specifically the tabs fix thank goodness for that. but unfortunately now there are other issues..

[omida86]

+1

[csbenjamin]

Can you provide a codeopen?

[rosscdh]

@csbenjamin sure of which aspect? it seems to be related to the recent tabs update.

my tabs look like this

        <md-tabs md-selected="selectedIndexPrimary" flex="90" flex-gt-lg="70">
          <md-tab ui-sref="product-search">
            <md-tab-label>
                <fa name="search" size="1" style="color:grey;margin-right:3px;"></fa>ProduktSuche
            </md-tab-label>
            <md-tab-body></md-tab-body>
          </md-tab>

          <md-tab ng-show="user.email" ui-sref="my-products">
            <md-tab-label>
              Meine Produkte
            </md-tab-label>
            <md-tab-body></md-tab-body>
          </md-tab>

          <md-tab ui-sref="article-list">
            <md-tab-label>
              News
            </md-tab-label>
            <md-tab-body></md-tab-body>
          </md-tab>

        </md-tabs>

[csbenjamin]

@rosscdh I'm using the 0.9.7 version and your code does not break to me. This is the why I'm asking a codeopen.io

[omida86]

I think the ui-routing system is not configured correctly.

[rosscdh]

I've jsut noticed another problem.. the tabs and tab directives dont seem to support

<md-tab ng-show="user">

the ng-show attribute gets totally ignored..

@omida86 the routes seem to work in all other places they are referenced. Its only on the tab/tabs that this weirdness happens.

[omida86]

Here is my solution which works correctly

<md-tabs selected="currentTab">
  <md-tab ng-repeat="swapTab in SwapTabs" md-on-select="onTabSelected(swapTab)">
    <md-tab-label>{{swapTab.Label}}</md-tab-label>
  </md-tab>
</md-tabs>

    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
      $scope.currentTab = toState.data.selectedTab;
    });

    $scope.onTabSelected = function(selectedSwapTab) {
      $state.transitionTo(selectedSwapTab.uiSref, {}, { location: true, inherit: true, relative: $state.$current, notify: true });
    };

$scope.SwapTabs = [
        {
          Index: 1,
          Label:'First',
          uiSref: 'swaps.all'
        },
              {
          Index: 2,
          Label:'Second',
          uiSref: 'swaps.all'
        },
      ];

Of course you need to specify: ui-view

And setup your routing correctly in app.js

[rosscdh]

@omida86 thanks ill give that a shot. Tho that is quite overkill for such a simple navigation implementation.

[omida86]

Well, your solution does not work since angular material transforms md-tabs to something else so you can't use ng-show etc as you noticed. It strips those things away.

[rosscdh]

@omida86 yep that appears to be the case. However is this an acceptable thing for it to do? considering front end folks/designers will be pottering away with this; I'd not exepct them to have to open the controller/service and stick fingers into that particular set of code?

[rosscdh]

Also

TypeError: Cannot read property 'offsetLeft' of undefined
    at adjustOffset (http://localhost:3030/bower_components/angular-material/angular-material.js:13421:19)
    at http://localhost:3030/bower_components/angular/angular.js:16299:28
    at completeOutstandingRequest (http://localhost:3030/bower_components/angular/angular.js:4924:10)
    at http://localhost:3030/bower_components/angular/angular.js:5312:7

were using https://github.com/d-oliveros/ngSticky which seems to cause an issue with the tabs implementaiton

[omida86]

Well in my case it was because I needed to separate the content from the tabs in order to load external content. Perhaps there is an easier way to do this.

[rosscdh]

@omida86 @csbenjamin should probably support ng-show ng-hide etc..

[csbenjamin]

A work around to ngShow problem, I remove the tab that I dont want to show from ngRepeat array. When I want to show again, I push it back to the array.

[csbenjamin]

@rosscdh look at #2465

[marcysutton]

Can you reword the title of this issue to be more accurate of your problem? Is it an issue with ng-show on tabs or ngSticky (which is considered 3rd party and not really supported)? Thank you!

[rosscdh]

Sorry am afk atm. Not sticky it's to do with the tab directive not supporting ng-show.

Re your suggestion thanks yes (have done this for a few years now ;) ) it's just not ideal and certainly not something I can hand over to the html guys who are used to the angular attribs on directives and not fiddling with controllers.

Im hoping this project stabelizes closer to 1.0 it's a great start but still feels quite rough. I'm constantly having to persude the team to not revert to predictable bootstrap. Fingers crossed and thanks for the great work so far! Much appreciated! (I'd offer to get involved but am swamped atm)

On Wednesday, 3 June 2015, Marcy Sutton notifications@github.com wrote:

Can you reword the title of this issue to be more accurate of your problem? Is it an issue with ng-show on tabs or ngSticky (which is considered 3rd party and not really supported)? Thank you!

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

[robertmesserle]

@rosscdh The preferred method for this would be to use ng-if or to remove the items from your list, both of which should work without any problems. As for show/hide, I'm not sure it makes sense to have the tabs present, but hidden; however, it is likely that we will be adding a way to have more control over the generated HTML which would likely include support for this functionality.

[robertmesserle]

Closing this issue - ng-hide or ng-show will cause major issues for tabs in that they will be hidden, but still accessible via keyboard shortcuts and will throw off screen readers. The proper method for accomplishing this is to use ng-if.