角料标签+ UI路由器：身体不加载

问题描述

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;

解决方案

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

这篇关于角料标签+ UI路由器：身体不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！