Page always gets flush after loaded when using ons-navigator inside ons-tabbar

Question

Hi Onsen UI community,

I have used ons-tabbar as follows:

<ons-page id="main-page" ng-controller="MainController">
<ons-tabbar>
    <ons-tab page="main_1.html" label="Dash" icon="smile-o" active="true"></ons-tab>
    <ons-tab page="main_2.html" label="Meet" icon="group"></ons-tab>
    <ons-tab page="main_3.html" label="Feat" icon="bullseye"></ons-tab>
    <ons-tab page="main_4.html" label="Mee" icon="user"></ons-tab>
    <ons-tab page="main_5.html" label="Set" icon="gear"></ons-tab>
</ons-tabbar>
</ons-page>

And inside main_1.html, I want to use ons-navigator like:

<ons-navigator title="Dashboard" var="nav" page="dashboard.html"></ons-navigator>
<ons-template id="dashboard.html">
    <ons-page id="dashboard-page">
        <ons-button ng-click="nav.pushPage('detail.html', { animation: 'slide' })">
            GoTo Detail
        </ons-button>
    </ons-page>
</ons-template>

So far, I can use the above codes without any problem. However, there is always a flush occurring after I clicked on 'GoTo button' and when the detail.html page is loaded.

I wonder if there is any better way to do so without any flush on the page.

Are you defining detail.html as a <ons-template> or is it loaded? Also, does it happen on a specific device or in the browser? — Andreas Argelius
I do not define <ons-template> in detail.html. It is just ons-page inside that file. I just noticed that it is working fine on Android. The problem occurs on iOS devices. — Nakket

cither cither · Accepted Answer · 2015-08-25T10:15:21

I think I finally found the cause. What caused the blink was nested <ons-page>s, I suppose. OnsenUI doesn't seem to allow nested <ons-page>s after all. Please try placing <ons-tabbar> at root, instead of under <ons-page>.

Page always gets flush after loaded when using ons-navigator inside ons-tabbar

1 Answers