離子 - 同一頁面中的多個視圖

Question

我在離子中是一種noob，我需要幫助/指導來構建聽起來很容易的東西。 我想擁有一個由多個內容組成的單個頁面，其想法是在同一頁面中有多個視圖，每個視圖都鏈接到特定的控制器。

這裏是我的代碼：

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' 
    }); 
} 

模板非常簡單：

個

first.html：

<div>first</div> 

second.html：

<div>Second</div> 

現在什麼也不顯示。

你們認爲什麼？

感謝您的幫助！

Answer 1

您的需求是多個命名視圖。 以下文獻是有用的實現在單個頁面中多個視圖 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