2015-05-23 34 views
6

angularJS UI路由器工作的TabControl的是可见的,当应用程序启动,但...请与角料设计TABS

当我点击选项卡上没有内容可见

什么我错了吗?

我用的是最新的angularJS材料设计0.9.4。

$urlRouterProvider.otherwise(""); 
     $stateProvider 

      .state("main", 
      { 
      abtract: true, 
      url: '', 
      views: { 
       '[email protected]': { 
       templateUrl: '../app/views/administration/administration.html', 
       controller: 'AdministrationController' 
       } 
      } 
      }) 
      .state('main.settings', { 
      url: '/settings', 
      views: { 
       '[email protected]': { 
       templateUrl: "../app/views/administration/settings.html", 
       controller: 'GlobalConfigurationController' 
       } 
      } 
      }) 
      .state('main.schoolyears', { 
      url: '/schoolyears', 
      views: { 
       '[email protected]': { 
       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> 
+0

你能后,你与

+0

你想要控制器代码?或者知道我是否将控制器包含在index.html中? – HelloWorld

+0

需要了解两者。 –

回答

5

更新:利用ui-srefmd-tabs固定在角材质0.10.0

一种解决方法已经公布在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' 
     }); 
+0

我知道这是但是我注意到你的Plunker中仍然存在一个bug。当你打回来从'标签2'浏览器选项卡中内容的变化箭头'标签1'但是'标签2'仍处于选中状态(下面有'标签2'红线内容时说:'标签1')。这可以解决吗? – Misiu

+0

请不要使用那个笨蛋了。它是用老版本的Angular Material制作的,需要解决方法才能与UI路由器配合使用。现在不是这样了。 – LeoLozes

+0

你可以看到它做工精细没有“跨度”黑客在这里:http://plnkr.co/edit/psinbetM1CUBqIxuL1yq – LeoLozes