使 angularJS ui 路由器与 Angular Material Design TABS 一起工作

Question

当应用启动时 TabControl 是可见的，但是...

当我点击一个标签时，没有内容可见

我做错了什么？

我使用最新的 angularJS 材料设计 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

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

解决方法已发布在 github 上，previous known md-tab issue：

有一个带有解决方法的plunker（它似乎在没有视图的情况下工作）：

  $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'
      });