Question

I m using Ionic to build an application. I是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>

和另一个看起来像分屏的视图。基本上我试图在同一页面上显示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

尝试替换

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

带

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

修改

可以选择使用此library。将“ionicMultipleViews”添加到angular.module，它应该可以工作。

离子在单个页面中显示多个视图

1 个答案: