I just started with Ionic, and I have an application to build that works like this:
An initial page shows up, with a list of items, when the user clicks on an item, a new window opens with ion-tabs inside it.
I'm populating ion-nav-view dynamically. I built an extremely simple version of this for testing purposes. Can anyone help me out to achieve the aforementioned functionality?
Problems:
- The main content of the 'main.html' page is hidden behind the nav-header
- The 'Tabs' page does not even open up when I click the button
- Even when I forcefully open the tabs page by navigating to #/tabs, they don't show up.
Can someone help me out here? I'm totally lost.
Thanks in advance!
HTML:
<body ng-app="starter">
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button class="button-clear">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
Loading
</ion-nav-view>
App. js Routes:
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/main.html'
})
.state('tabs', {
url: '/tabs',
templateUrl: 'templates/tabs.html'
})
$urlRouterProvider.otherwise('/main');
Main.html:
<ion-content>
Hey There
<button class="button button-dark" ng-href="#/tabs">
Click Me
</button>
</ion-content>
Tabs.html:
<ion-tabs class="tabs-balanced">
<ion-tab title="Hey"></ion-tab>
<ion-tab title="There"></ion-tab>
</ion-tabs>