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在单个页面中显示多个视图

回答

相关问题