角度材料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'); 
    }); 

​​

---

を参照してください。 tab chanのこの例の欠点私は何度も繰り返し負荷をかけます。AppCtrlコントローラ。

私の目標はコントローラを一度ロードすることです。。

私が知っているアプローチの1つは、親の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> 

そして、私の状態プロバイダは、次のようになります。それはdoesnのがここ

$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

私はあなたの2番目のアプローチは良いと思います。 <md-tab-body>をui-viewをそれぞれ<md-tab>の内側に配置する必要があるため、タブの内容は表示されません。例：

<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> 

私はあなたが作業例を持ってhereあなたplunkerをフォークしてきました：コントローラーは一度だけロードされ、タブの内容が見られます。

希望します。