Угловой Материал Tabs + щ-маршрутизатор: тело не загружается

Question

Update: использование ui-sref и md-tabs было зафиксировано в угловом Материале 0.10.0

Прежде всего, мы знаем, что есть несколько проблемы, подобные этому. Тем не менее, мы пытались часами, и нам все равно не повезло, поэтому давайте посмотрим, может ли кто-то пролить свет на этот конкретный случай.

Мы стараемся иметь две вкладки с двумя различными видами двух разных контроллеров.

Вкладки отображаются отлично, они работают, а URL изменяется при изменении вкладок, но вкладка «тело» никогда не загружается.

пользовательский интерфейс-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

Во-первых, я думаю, что ваши маршруты не так как вы хотите, чтобы они были. URL-адрес подстанции (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' 
     } 
}