Angular Material Tabs + ui-router: body not loading

问题

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

First of all, we're aware there's several issues similar to this one. However, we've been trying for hours, and still no luck, so let's see if someone can shed a bit of light on this particular case.

We are trying to have two tabs, with two different views an two different controllers.

The tabs render fine, they work, and the URL changes on tab change, but the tab "body" is never loaded.

The ui-sref is defined in a span to avoid https://github.com/angular/material/issues/2344

Module configuration

  function testRouteConfig($stateProvider) {
    $stateProvider
      .state('testTabs', {
        abstract: true,
        url: '/test/tabs',
        templateUrl: 'modules/test/test.html',
        controller: 'TestController as vm'
      })
      .state('testTabs.testMain', {
        url: '/test/main',
        data: {
          'selectedTab': 0
        },
        views: {
          'testMain': {
            templateUrl: 'modules/test/main/mainTest.html',
            controller: 'MainTestController as vm'
          }
        }
      })
      .state('testTabs.testAbout', {
        url: '/test/about',
        data: {
          'selectedTab': 1
        },
        views: {
          'testAbout': {
            templateUrl: 'modules/test/about/aboutTest.html',
            controller: 'AboutTestController as vm'
          }
        }
      });
  }

Tabs definition (test.html)

<md-tabs md-selected="currentTab" md-stretch-tabs="always" class="main-toolbar">
  <md-tab>
    <md-tab-label><span ui-sref="testTabs.testMain">Profile</span></md-tab-label>
    <md-tab-body ui-view="testMain" layout="vertical" layout-fill></md-tab-body>
  </md-tab>
  <md-tab>
    <md-tab-label><span ui-sref="testTabs.testAbout">About</span></md-tab-label>
    <md-tab-body ui-view="testAbout" layout="vertical" layout-fill></md-tab-body>
  </md-tab>
</md-tabs>

Main controller

'use strict';

TestController.$inject = ['$scope'];

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

module.exports = TestController;

Example tab body

<p>{{vm.title}}</p>

Example tab controller

'use strict';

AboutTestController.$inject = [];

function AboutTestController() {
  var vm = this;

  vm.title = 'About Test page';
}

module.exports = AboutTestController;

回答1:

First off, I think your routes are not as you want them to be. The url of a substate (state.substate) will be appended to the state's url. The url to your state 'testTabs.testMain' would be /test/tabs/test/main'. If you want it to be absolute, you have to prepend a ^: ^/test/main. Or simply make it relative by removing the heading /test.

If that doesn't do the trick, try naming the views absolutely:

views: {
      'testMain@testTabs': {
        templateUrl: 'modules/test/main/mainTest.html',
        controller: 'MainTestController as vm'
      }
}

来源：https://stackoverflow.com/questions/30356214/angular-material-tabs-ui-router-body-not-loading

标签

angularjs

tabs

angular-ui-router

angular-material