嵌套的离子导航视图实现

我正在尝试用离子学习角度并试图理解嵌套的离子导航视图概念 .

现在我有一个标签模板代码，如 -

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent">
        <ion-tabs class="tabs-icon-top tabs-color-active-positive">

            <ion-tab title="Show All" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
              <ion-nav-view name="tab-dash"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Collect Stamps" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
              <ion-nav-view name="tab-chats"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Order Food" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
              <ion-nav-view name="tab-account"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Reserve a table" icon-off="ion-ios-rainy" icon-on="ion-ios-rainy" href="#/tab/account">
              <ion-nav-view name="tab-account"></ion-nav-view>
            </ion-tab>
        </ion-tabs>
        </ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-header-bar class="bar-stable">
            <h1 class="title">Left in Menu</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item menu-close ng-click="login()">
                    Login
                </ion-item>
                <ion-item menu-close href="#/app/search">
                    Search
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>

</ion-side-menus>

对于app.js代码 -

$stateProvider
  // setup an abstract state for the tabs directive
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

现在，离子标签总是正确加载，但任何嵌套的nav视图都没有任何内容 .

所以我有外部导航视图，名称为menuContent，内部导航视图，名称为“tab-chats”/“tab-dash”等 .

如果我删除外部nav视图，则内容会正确加载 .

我想了解我在app.js状态中直接提到嵌套内部nav-view的原因 .