Question

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

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

我们试图有两个标签，两个不同的视图和两个不同的控制器。

选项卡呈现正常，它们有效，并且标签上的URL更改会更改，但选项卡＆＃34; body＆＃34;永远不会加载。

ui-sref在跨度中定义以避免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

首先，我认为你的路线并不像你想要的那样。子状态（state.substate）的url将附加到状态的url。您所在州'testTabs.testMain'的网址为/test/tabs/test/main'。如果您希望它是绝对的，则必须添加^：^/test/main。或者只需删除标题/test。

即可使其相对

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

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

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

1 个答案: