Angular Material Tabs + ui-router:body 未加载 [英] Angular Material Tabs + ui-router: body not loading

问题描述

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

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.

标签呈现良好，它们工作，并且标签更改时 URL 更改，但从未加载标签正文".

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

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

The ui-sref is defined in a span to avoid 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;

推荐答案

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

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

这篇关于Angular Material Tabs + ui-router:body 未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！