离子 - 同一页面中的多个视图 [英] Ionic - Multiple view in same page
问题描述
我是Ionic中的一个菜鸟,我需要帮助/指导来构建听起来容易的东西。
我希望有一个由多个内容组成的单个页面,其想法是在同一页面中有多个视图,每个视图都链接到一个特定的控制器。
I am kind of a noob in Ionic and I need help / guidelines to build something that sounds easy. I want to have a single page composed of multiple content, the idea is to have multiple views in the same page each of them being linked to a specific controller.
这是我的代码:
index.html内容:
index.html content:
<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中:
In my app.js:
angular.module('app', [])
.controller('FirstController', function($scope) {
})
.controller('ScdController', function($scope) {
});
在我的config.routes.js中:
In my 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:
first.html:
<div>first</div>
second.html:
second.html:
<div>Second</div>
现在没有显示任何内容。
Right now nothing is displayed.
你觉得怎么样?
感谢您的帮助!
推荐答案
您的要求是多个命名视图。
以下文档对于在单个页面中实现多个视图很有用
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Your requirement is multiple named views. Following document is useful to implement multiple views in a single page 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
这篇关于离子 - 同一页面中的多个视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!