Angular Material Tabs + ui-router：正文未加载

Question

更新：在 Angular Material 0.10.0 中修复了 ui-sref 和 md-tabs 的使用

首先，我们知道有几个与此类似的问题。 但是，我们已经尝试了几个小时，但仍然没有运气，所以让我们看看是否有人可以对这个特殊情况有所了解。

我们试图有两个选项卡，两个不同的视图和两个不同的控制器。

标签呈现正常，它们工作，并且标签更改时 URL 更改，但标签“正文”从未加载。

ui-sref 被定义在一个 span 中以避免https://github.com/angular/material/issues/2344

模块配置

  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'
          }
        }
      });
  }

选项卡定义 (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>

主控制器

'use strict';

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

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

module.exports = TestController;

标签正文示例

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

标签控制器示例

'use strict';

AboutTestController.$inject = [];

function AboutTestController() {
  var vm = this;

  vm.title = 'About Test page';
}

module.exports = AboutTestController;

Answer 1

首先，我认为您的路线并不像您希望的那样。子状态的 url (state.substate) 将附加到状态的 url。您所在州'testTabs.testMain' 的网址是/test/tabs/test/main'。如果你希望它是绝对的，你必须在前面加上^:^/test/main。或者只是通过删除标题/test 使其相对。

如果这不起作用，请尝试绝对命名视图：

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