角材料mdTab和抽象路線問題

Question

我嘗試每md-tab創建單獨的狀態，下面的例子中正常工作：

<div ng-app="app"> 
    <script type="text/ng-template" id="one.html"> 
    <div>This is first tab</div> 
    </script> 
    <script type="text/ng-template" id="two.html"> 
    <div>This is second tab</div> 
    </script> 

    <md-tabs> 
    <md-tab md-on-select="transitionTo('tab1',{})"> 
     <md-tab-label>Tab1</md-tab-label> 
    </md-tab> 
    <md-tab md-on-select="transitionTo('tab2',{})"> 
     <md-tab-label>Tab2</md-tab-label> 
    </md-tab> 
    </md-tabs> 

    <br> 
    <div ui-view></div> 
</div> 

JS

var app = angular.module('app',['ui.router','ngMaterial']); 
app.run(function($rootScope, $state) { 
    $rootScope.transitionTo = function(state, params) { 
    $state.transitionTo(state, params, { location: true, inherit: true, relative: $state.$current, notify: true }); 
    } 
    $rootScope.checkState = function (state) { 
    return $state.current.name == state ? true : false; 
    } 

    $rootScope.$on('$stateChangeSuccess', 
    function(event, toState, toParams, fromState, fromParams){ 
    if($state.current.name == 'tab2') { 
     $rootScope.tab = { selected : 1 } 
    } else { 
     $rootScope.tab = { selected : 0 } 
    } 
    }) 
}); 
app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('tab1', { 
     url : '/tab1', 
     templateUrl : 'one.html', 
     controller: 'AppCtrl' 
    }) 
    .state('tab2', { 
     url : '/tab2', 
     templateUrl : 'two.html', 
    controller: 'AppCtrl' 
    }) 
    $urlRouterProvider.otherwise('/tab1'); 
}); 


app.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) { 
    console.log('AppCtrl'); 
    }); 

見​​

---

這個例子的缺點，在選項卡上我一次加載AppCtrl控制器。

所以我的目標是加載控制器一次。

我知道的方法之一是使用父母abstract狀態。在這裏，我們去：

首先，我創建新的文件root.html與標籤：

<script type="text/ng-template" id="root.html"> 
    <md-tabs> 
    <md-tab md-on-select="transitionTo('root.tab1',{})"> 
     <md-tab-label>Tab1</md-tab-label> 
    </md-tab> 
    <md-tab md-on-select="transitionTo('root.tab2',{})"> 
     <md-tab-label>Tab2</md-tab-label> 
    </md-tab> 
    </md-tabs> 
    </script> 

而且我的狀態提供者應該是這樣的：

$stateProvider 
    .state('root', { 
     url : '/root', 
     templateUrl : 'root.html', 
    controller: 'AppCtrl' 
    }) 
    .state('root.tab1', { 
     url : '/tab1', 
     templateUrl : 'one.html' 
    }) 
    .state('root.tab2', { 
     url : '/tab2', 
     templateUrl : 'two.html' 
    }) 
    $urlRouterProvider.otherwise('/root/tab1'); 

這裏is a DEMO with this change

但是它不沒有工作。有一次，我只加載AppCtrl但我看不到標籤的內容，換句話說，我從來不叫'root.tab1'和'root.tab2'

我做錯了的是什麼？

有什麼建議嗎？

Answer 1

我認爲你的第二種方法很好。 您沒有看到標籤內容，因爲您需要在每個<md-tab>的內部放置一個<md-tab-body>和ui-view。例如：

<md-tab md-on-select="transitionTo('root.tab1',{})"> 
    <md-tab-label>Tab1</md-tab-label> 
    <md-tab-body> 
     <div ui-view></div> 
    </md-tab-body> 
</md-tab> 

我已經分叉的plunker和here你有一個工作例如：控制器只加載一次和標籤內容可見。

希望它有幫助。