Угловая материал 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'); 
    }); 

См DEMO in Codepen

---

Недостаток этого примера, на вкладке chan ge i загрузить снова и снова 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-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> 

Я раздвоенный свой plunker и here у вас есть рабочий пример контроллера загружается только один раз, и вкладка содержимое видно.

Надеюсь, это поможет.