I am trying to do tab content page with the “standard” way as suggested by the ionic template example (ionic start myproject tabs).
On the tab page, I will have the same nav bar content across all tabs content (same title & same extra buttons on the right side of nav bar). Based on the default structure, it will automatically re-render the nav bar when user clicking between tab content.
How can I have it skipping update the nav bar, but only update the tab content part and still leveraging the ionic cache system? Would this way be more performance?
tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
dashboard.html
<ion-view view-title="App Name">
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-search"></button>
</ion-nav-buttons>
<ion-content>
Dashboard Content
</ion-content>
</ion-view>
chats.html
<ion-view view-title="App Name">
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-search"></button>
</ion-nav-buttons>
<ion-content>
Chats Content
</ion-content>
</ion-view>
account.html
<ion-view view-title="App Name">
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-search"></button>
</ion-nav-buttons>
<ion-content>
Account Content
</ion-content>
</ion-view>