I'm relatively new to ONSEN UI, I am using a tabbar layout and also pushing to different pages when an "option" is pressed, this is my solution for it to do so:
<ons-navigator id="myNavigator" animation="fade" page="timer.html">
<ons-page>
<ons-tabbar swipeable animation='slide' position="bottom">
<ons-tab page="classic.html" label="CLASSIC" icon="fa-smile" active>
</ons-tab>
<ons-tab page="drinking.html" label="DRINK" icon="fa-beer" badge="NEW">
</ons-tab>
</ons-tabbar>
<ons-toolbar>
<ons-toolbar>
<div class="center">Truth or Dare - Unlimited</div>
<div class="right menu">
<ons-toolbar-button>
<ons-icon icon="fa-ellipsis-v"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
</ons-toolbar>
</ons-page>
</ons-navigator>
<template id="classic.html">
<ons-navigator id="myNavigator" animation="fade" page="classic.html">
<ons-page id="classic">
<div class="options">
<div class="option vibrate easy">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/easy.png" class="level-img" alt="Easy">
<h2>Easy</h2>
</div>
<div class="option vibrate normal">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/normal.png" class="level-img" alt="Normal">
<h2>Normal</h2>
</div>
<div class="option vibrate hard">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/hard.png" class="level-img" alt="Hard">
<h2>Hard</h2>
</div>
<div class="option locked vibrate nightmare">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/nightmare.png" class="level-img" alt="Nightmare">
<h2>Nightmare</h2>
</div>
<div class="option locked vibrate random">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/random.png" class="level-img" alt="Random">
<h2>Random</h2>
</div>
<div class="option locked vibrate couple">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/couple.png" class="level-img" alt="Couple">
<h2>Couple</h2>
<p>(Dirty)</p>
</div>
</div>
</ons-page>
</ons-navigator>
</template>
<template id="drinking.html">
<ons-navigator id="myNavigator" animation="fade" page="drinking.html">
<ons-page id="drinking">
<p>PAGE 2</p>
</ons-page>
</ons-navigator>
</template>
No custom js is used for the tabbar elements.
Why isn't the content on my second tabbar page showing? I've tried removing the ons-navigator from the drinking template but still no progress, now I'm stuck.
What am I doing wrong?