Make angularJS ui router work with angular material design TABS

Question

The TabControl is visible when the app starts but...

When I click on a tab NO content is visible

What do I wrong?

I use the latest angularJS material design 0.9.4.

   $urlRouterProvider.otherwise("");
      $stateProvider

          .state("main",
          {
            abtract: true,
            url: '',
            views: {
              'content@': {
                templateUrl: '../app/views/administration/administration.html',
                controller: 'AdministrationController'
              }
            }
          })
          .state('main.settings', {
            url: '/settings',
            views: {
              'settings@main': {
                templateUrl: "../app/views/administration/settings.html",
                controller: 'GlobalConfigurationController'
              }
            }
          })
          .state('main.schoolyears', {
            url: '/schoolyears',
            views: {
              'schoolyears@main': {
                templateUrl: "../app/views/schoolyear/schoolyears.html",
                controller: 'SchoolyearsController'
              }
            }
          });

HTML

<div layout-fill layout="column">
  <div ng-include="'app/components/navbar/navbar.html'"></div>
  <div id="content" layout="column" layout-padding>

    <md-tabs md-stretch-tabs="always" class="md-primary md-hue-2">

      <md-tab label="Schoolyears" ui-sref="main.schoolyears" md-active="$state.is('main.schoolyears')">
        <md-tab-body ui-view="schoolyears" layout="vertical" layout-fill></md-tab-body>
      </md-tab>

      <md-tab label="settings" ui-sref="main.settings" md-active="$state.is('main.settings')">
         <md-tab-body ui-view="settings" layout="vertical" layout-fill></md-tab-body>
      </md-tab>

    </md-tabs>
  </div>
</div>

Can you post the code where you are sourcing the controllers with <script tag? — Nagasimha Iyengar
– Nagasimha Iyengar, Commented May 23, 2015 at 17:58
you want the controllers code? Or know wether I include the controller in the index.html? — HelloWorld
– HelloWorld, Commented May 23, 2015 at 18:42
I have no error in the browser console. Thus all files are included. All 3 controllers are empty with no code of mine. They also need no code to make the tab work. This is just a router/state and html problem. — HelloWorld
– HelloWorld, Commented May 23, 2015 at 18:54
ok. in that case, when you click on schoolyears tab, can you tell if schoolyears,html is getting called? via console? — Nagasimha Iyengar
– Nagasimha Iyengar, Commented May 23, 2015 at 19:10

Leo Lozes · Accepted Answer · 2015-08-10 08:22:26Z

5

Update: the use of ui-sref and md-tabs was fixed in Angular Material 0.10.0

A workaround has been posted on github, on the previous known md-tab issue:

There's a plunker with the workaround (it seems to work without the views):

  $stateProvider
      .state('tabs', {
        abstract: true,
        url: '/tabs',
        templateUrl: 'tabs.html',
        onEnter: function() { console.log("enter tabs.html"); } })

      .state('tabs.tab1', {
        url: '/tab1',
        onEnter: function() { console.log("enter tab1.html"); },
        controller: function($scope) {

        },
        templateUrl: 'tab1.html'
      })
      .state('tabs.tab2', {
        url: '/tab2',
        onEnter: function() { console.log("enter tab2"); },
        controller: function($scope) {

        },
        templateUrl: 'tab2.html'
      });

edited Aug 10, 2015 at 8:22

answered May 25, 2015 at 9:13

Leo Lozes

1,3881 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Misiu Over a year ago

I know this is ond question, but I noticed that there is still one bug in Your Plunker. When You hit back arrow in browser tab content changes from tab 2 to tab 1 but tab 2 is still selected (there is red line below tab 2 when content says tab 1). Can this be fixed?

Leo Lozes Over a year ago

Please don't use that plunker anymore. It was made with an old version of Angular Material that needed the workaround to play nice with ui-router. It's not the case anymore.

Leo Lozes Over a year ago

You can see it working fine without the "span" hack here: plnkr.co/edit/psinbetM1CUBqIxuL1yq

Misiu Over a year ago

Thank You for reply, but in Your latest Plunker when clicking back in browser tab 1 isn't getting selected. I've tweaked Your code a bit and got this: plnkr.co/edit/4gKaghePnTMh4NgfQcxC?p=preview

Misiu Over a year ago

Anyway thanks for answer, Your code helped me getting started

|

Collectives™ on Stack Overflow

Make angularJS ui router work with angular material design TABS

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related