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

I m using Ionic to build an application. I m新到Ionic，我想在設置我的視圖時提供一些幫助。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>

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

來源

2016-01-14 Alex Chaplinsky

嘗試用

<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，它應該工作。

來源

2016-01-14 09:54:55

nope，仍然是相同的結果 –

ion-nav-view包含狀態轉換的歷史記錄，應該用作單個父視圖。嘗試使用ion-view指令。 –

好的。我檢查了這一點，發現這是不可能的。你可以試試這個擴展https://github.com/alongubkin/ionic-multiple-views –

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

回答

相關問題