angularjs - 使 angularJS ui 路由器与 Angular Material 设计 TABS 一起工作

Question

TabControl 在应用程序启动时可见，但...

当我单击选项卡时，没有内容可见

我怎么了？

我使用最新的 angularJS Material 设计 0.9.4。

   $urlRouterProvider.otherwise("");
      $stateProvider

          .state("main",
          {
            abtract: true,
            url: '',
            views: {
              'content@': {
                templateUrl: '../app/views/administration/administration.html',
                controller: 'AdministrationController'
              }
            }
          })
          .state('main.settings', {
            url: '/settings',
            views: {
              'settings@main': {
                templateUrl: "../app/views/administration/settings.html",
                controller: 'GlobalConfigurationController'
              }
            }
          })
          .state('main.schoolyears', {
            url: '/schoolyears',
            views: {
              'schoolyears@main': {
                templateUrl: "../app/views/schoolyear/schoolyears.html",
                controller: 'SchoolyearsController'
              }
            }
          });

HTML

<div layout-fill layout="column">
  <div ng-include="'app/components/navbar/navbar.html'"></div>
  <div id="content" layout="column" layout-padding>

    <md-tabs md-stretch-tabs="always" class="md-primary md-hue-2">

      <md-tab label="Schoolyears" ui-sref="main.schoolyears" md-active="$state.is('main.schoolyears')">
        <md-tab-body ui-view="schoolyears" layout="vertical" layout-fill></md-tab-body>
      </md-tab>

      <md-tab label="settings" ui-sref="main.settings" md-active="$state.is('main.settings')">
         <md-tab-body ui-view="settings" layout="vertical" layout-fill></md-tab-body>
      </md-tab>

    </md-tabs>
  </div>
</div>

Answer 1

Update: the use of ui-sref and md-tabs was fixed in Angular Material 0.10.0

已在 github 上发布了一种解决方法，位于 previous known md-tab issue :

有一个 plunker使用解决方法(它似乎在没有 View 的情况下工作):

  $stateProvider
      .state('tabs', {
        abstract: true,
        url: '/tabs',
        templateUrl: 'tabs.html',
        onEnter: function() { console.log("enter tabs.html"); } })

      .state('tabs.tab1', {
        url: '/tab1',
        onEnter: function() { console.log("enter tab1.html"); },
        controller: function($scope) {

        },
        templateUrl: 'tab1.html'
      })
      .state('tabs.tab2', {
        url: '/tab2',
        onEnter: function() { console.log("enter tab2"); },
        controller: function($scope) {

        },
        templateUrl: 'tab2.html'
      });