Ionic在單個頁面中顯示多個視圖

Question

I m using Ionic to build an application. I m新到Ionic，我想在設置我的視圖時提供一些幫助。

我的應用包含其中包含的主頭

<script type="text/ng-template" id="main-view"> 
    <ion-header-bar class='bar bar-header bar-stable' align-title="center"> 
     <h3 class="title">Title</h3> 
    </ion-header-bar> 
    <ion-nav-view name="View-A"></ion-nav-view> 
    <ion-nav-view name="View-B"></ion-nav-view> 
</script> 

並且應該像分割畫面另一個視圖的抽象主視圖。 basicly我真的試圖展示在同一頁上2次（用不同的控制器）

這是我的配置：

.config(function ($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    // setup an abstract state for the tabs directive 
     .state('main', { 
      url: '/main', 
      abstract: true, 
      templateUrl: 'main-view' 
      } 

     }) 
    .state('main.inner', { 
     url: '/inner', 
     views: { 
      'View-A': { 
       templateUrl: "View-A", 
       controller: 'ViewACtrl' 
      }, 
      'View-B': { 
       templateUrl: 'View-B', 
       controller: 'ViewBCtrl' 
      } 
     } 
    }); 

    $urlRouterProvider.otherwise('/main/inner'); 

}) 

的觀點是這樣的

<script type="text/ng-template" id="View-A"> 
    <ion-view> 
<-- DATA --> 
</ion-view> 
</script> 

<script type="text/ng-template" id="View-B"> 
    <ion-view> 
<-- DATA --> 
</ion-view> 
</script> 

的問題是，只顯示第二個視圖。 我做錯了什麼？

Answer 1

嘗試用

<div ui-view="View-A"></div> 
<div ui-view="View-B"></div> 

編輯

更換

<ion-nav-view name="View-A"></ion-nav-view> 
<ion-nav-view name="View-B"></ion-nav-view> 

還有就是用這個library的選項。添加'ionicMultipleViews'到angular.module，它應該工作。