Ionic - 同一页面中的多个视图

我是 Ionic 中的菜鸟，我需要帮助/指南来构建听起来很简单的东西。 我想要一个由多个内容组成的页面，其想法是在同一页面中拥有多个视图，每个视图都链接到特定的控制器。

这是我的代码：

index.html内容：

   <ion-pane>
     <ion-nav-view></ion-nav-view>

     <ion-view ng-controller="FirstController">
       <ion-content>
       </ion-content>
     </ion-view>

     <ion-view ng-controller="ScdController">
       <ion-content>
       </ion-content>
     </ion-view>
  </ion-pane>

在我的 app.js 中：

 angular.module('app', [])
 .controller('FirstController', function($scope) {
 })

 .controller('ScdController', function($scope) {
 });

在我的 config.routes.js 中：

angular.module('app')
.config(configure);

function configure($stateProvider){
  $stateProvider
    .state('first', {
      url: '/',
      templateUrl: 'templates/first.html',
      controller: 'FirstController'
    })
   .state('second', {
      url: '/',
      templateUrl: 'templates/second.html',
      controller: 'ScdController'
   });
 }

模板非常简单：

首先.html：

<div>first</div>

第二个.html：

<div>Second</div>

现在什么也没有显示。

你们有什么感想？

感谢您的帮助！

您的要求是多个命名视图。 以下文档对于在单个页面中实现多个视图很有用https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

示例代码：

HTML:

<ion-view title="">
   <ion-content scroll="true">
     <div ui-view="first"></div>
     <div ui-view="second"></div>
   </ion-content>
</ion-view>

JS:

angular.module('app')
 .config(function($stateProvider) {
   $stateProvider
    .state({
       name : 'multiple-views'
       views: {
        'first': {
           url: '/',
           templateUrl: 'templates/first.html',
           controller: 'FirstController'
         },
        'second': {
           url: '/',
           templateUrl: 'templates/second.html',
           controller: 'ScdController'
         }
       }
    });

工作示例链接：http://plnkr.co/edit/kZZ4KikwLITOxR5IGltr?p=preview http://plnkr.co/edit/kZZ4KikwLITOxR5IGltr?p=preview