3. Programmatically replace an ons-tab page with another page

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Programmatically replace an ons-tab page with another page

  • H

    I have an Angular js app with 3 tabs. I need to open a page that is not part of the ons-tabbar and have the tab bar still be visible. If I use navigator.pushPage or navigator.resetToPage the tab bar is covered by the page. Is there a way to avoid that? I was thinking of perhaps programmatically replacing the tab page - any pointers how to do that? or is there a better way?
    Thanks in advance.
    Andy

    0
    H
     1 Reply
  • H

    @heel_curve5
    Answering my own question…
    The ons-tabbar has a method loadPage that replaces the page of the active tab with the one you specify… Unfortunately this is not documented at least in the Angular JS so it took some trial and error.

    0
  • E
    administrators

    @heel_curve5

    Where are you seeing the loadPage method? As far as I can see, ons-tabbar doesn’t have a loadPage method. The only loadPage I can find is ons-navigator.pageLoader.loadPage which wouldn’t solve your problem of the tabbar disappearing.

    0
  • H

    My tab bar is defined as follows

    <ons-tabbar class="bg-grey" var="myTabBar">

    I put a breakpoint in the code and examined the myTabBar variable
    The loadPage method is in the class that tab bar inherits from.
    In chrome://inspect hover over the tabbar variable and click on “proto” to see all parent methods.

    0
  • E
    administrators

    Thanks for that information

    0