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

这个例子的缺点，在选项卡更改时我一次又一次地加载 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> 中放置一个带有 ui-view 的 <md-tab-body>。示例：

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

我已经 fork 你的 plunker 并且 here 你有一个工作示例：控制器只加载一次并且可以看到选项卡内容。

希望对您有所帮助。

Angular material mdTab 和抽象路由问题

Angular material mdTab and abstract route issue

angularjs

angular-material