Question

我开始使用Ionic，我正在训练自己的多个视图。但我有一点问题，这是代码：

这是index.html文件：

<html>
  <head>
    ...
  </head>
  <body ng-app="app">

    <ion-nav-view></ion-nav-view>
  </body>
</html>

app.js

(function(){
    'use strict';

    angular.module('app', ['ionic'])

    .config(function($stateProvider, $urlRouterProvider){

        $stateProvider

        .state('home',{
            abstract : true,
            url : '/home',
            templateUrl: 'app/home.html'
        })

        .state('home.views', {
            url: "/views",
            views:{
                'view1' : {template:'<h3>view1</h3>'},
                'view2' : {template:'<h3>view2</h3>'},
                'view3' : {template:'<h3>view3</h3>'}
            }
        })

        $urlRouterProvider.otherwise("/home/views");
    })
})()

home.html的

<h1>Views</h1>
<ion-nav-view name='view1'></ion-nav-view>
<ion-nav-view name='view2'></ion-nav-view>
<ion-nav-view name='view3'></ion-nav-view>

但是当我尝试在localhost上测试运行它的应用程序时，我看到的只是最后一个视图。如果我从html删除最后一个，那么第二个显示，所以.. 我真的不知道如何解决它，有人可以帮助我吗？

同一页面中的离子多视图仅显示

0 个答案: