When I use myNavigator.pushPage() I am redirecting the user to a new page from an index.html page, however I only want the tabbar from the page the user is being redireted to show, currently it shows the redireted page tabbar underneath the main index.html tabbar:
Index.html
<ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="90%" type="reveal" side="left"> </ons-sliding-menu> <ons-template id="main.html"> <ons-navigator var="myNavigator"> <ons-page ng-controller="LoginController"> <ons-tabbar position="top"> <ons-tabbar-item style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" onclick="menu.toggleMenu()"></ons-tabbar-item> <ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item> <ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item> <ons-tabbar-item page="negative.html" icon="ion-android-walk"></ons-tabbar-item> <ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item> </ons-tabbar> </ons-page> </ons-navigator> </ons-template>
Settings.html
<ons-page ng-controller="Settings"> <ons-tabbar position="top"> <ons-row> <ons-col width="15%"> <div style="margin-top:5px"><ons-back-button> </ons-back-button></div> </ons-col> <ons-col width="45%" align="left"> <div style="padding-top:18px;color:#fff">Settings</div> </ons-col> <ons-col width="20%" align="left"> </ons-col> </ons-row> </ons-tabbar> <div class="login-form"> <ons-row style="padding-top: 30px;padding-bottom:10px; text-align: center;"> <ons-col> <div align="center" style="padding:10px;font-size:0.8em">Update your settings below</div> </ons-col> </ons-row> <ons-row style="margin-top: 20px; text-align: center;"> <input type="email" class="text-input--underbar" placeholder="Email" ng-model="emailx" id="emailx"> <input type="text" class="text-input--underbar" placeholder="First Name" ng-model="firstname" id="firstname"> <input type="text" class="text-input--underbar" placeholder="Last Name" ng-model="lastname" id="lastname"> <input type="password" class="text-input--underbar" placeholder="Password" value="" id="password"> <p style="margin-top:15px"> <ons-button modifier="large" class="login-button" ng-click="updateSettings();">Update</ons-button> </p> </ons-row> </div> <ons-row style="padding: 20px; text-align: center;border-bottom:1px solid #e3e3e3"> <div align="center"> </div> </ons-row> <ons-row style="padding: 20px; text-align: center;"> <ons-col > <ons-button modifier="large" style="background:#ccc" ng-click="logout()">Logout</ons-button> </ons-col> </ons-row> </ons-page>
Notice how I have a tabbar in settings.html, right now this shows underneath the tabbar from index.html, but I want it to replace it or show just by itself when user is redirected to settings.html by pushPage()