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的使用

已在previous known md-tab issue上的github上发布了一种解决方法：

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

使angularJS ui路由器与角度材料设计TABS一起使用

1 个答案: