Hello, my first tests with Ionic I made with version 1.0.0-beta.11.
There it was possible to display multiple views one underneath the other.
Since version 1.0.0-beta.12 the views are one upon the other.
Here is my example:
index.html:
MyBTests<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<ion-header-bar align-title="center" class="bar-positive">
<h1 class="title">View-Test</h1>
</ion-header-bar>
<ion-view>
<ion-content has-header="true" has-footer="false" padding="true" scroll="false">
<ion-scroll has-bouncing="true" zooming="true" min-zoom="0.5" max-zoom="3" scrollbar-x="false" scrollbar-y="false" direction="xy" style="width: 100%; height: 100%">
<ion-nav-view animation="fade-in" name="top">top</ion-nav-view>
<ion-nav-view animation="fade-in" name="middle">middle</ion-nav-view>
<ion-nav-view animation="fade-in" name="bottom">bottom</ion-nav-view>
</ion-scroll>
</ion-content>
</ion-view>
<script type="text/ng-template" id="top.html">
<h2>Top View</h2>
<p>Text1 (Top)</p>
</script>
<script type="text/ng-template" id="middle.html">
<h2>Middle View</h2>
<p>Text1 (Middle)</p>
<p>Text2 (Middle)</p>
</script>
<script type="text/ng-template" id="bottom.html">
<h2>Bottom View</h2>
<p>Text1 (Bottom)</p>
<p>Text2 (Bottom)</p>
<p>Text3 (Bottom)</p>
</script>
app.js:
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(’/go’);
$stateProvider.state(‘go’, {
url: ‘/go’,
views: {
‘top’: {
templateUrl: ‘top.html’
},
‘middle’: {
templateUrl: ‘middle.html’
},
‘bottom’: {
templateUrl: ‘bottom.html’
}
}
});
});
Please tell me what’s wrong.
Thanks in advance,
Jörg
