View Source Improve this doc

ons-navigator

A component that provides page stack management and navigation. This component does not have a visible content.

Usage # 

<ons-navigator animation="slide" var="app.navi">
  <ons-page>
    <ons-toolbar>
      <div class="center">Title</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button modifier="light" ng-click="app.navi.pushPage('page.html');">Push</ons-button>
    </p>
  </ons-page>
</ons-navigator>

<ons-template id="page.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Title</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button modifier="light" ng-click="app.navi.popPage('page.html');">Pop</ons-button>
    </p>
  </ons-page>
</ons-template>

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

See also #

Attributes #

Name Type
Default Value		 Description
page String First page to show when navigator is initialized. Optional
var String Variable name to refer this navigator. Optional
ons-prepush Expression Allows you to specify custom behavior when the "prepush" event is fired. Optional
ons-prepop Expression Allows you to specify custom behavior when the "prepop" event is fired. Optional
ons-postpush Expression Allows you to specify custom behavior when the "postpush" event is fired. Optional
ons-postpop Expression Allows you to specify custom behavior when the "postpop" event is fired. Optional
ons-destroy Expression Allows you to specify custom behavior when the "destroy" event is fired. Optional

Methods Summary #

Signature Description
pushPage(pageUrl, [options]) Pushes the specified pageUrl into the page stack.
insertPage(index, pageUrl, [options]) Insert the specified pageUrl into the page stack with specified index.
popPage([options]) Pops the current page from the page stack. The previous page will be displayed.
replacePage(pageUrl, [options]) Replaces the current page with the specified one.
resetToPage(pageUrl, [options]) Clears page stack and adds the specified pageUrl to the page stack.
getCurrentPage() Get current page's navigator item. Use this method to access options passed by pushPage() or resetToPage() method.
getPages() Retrieve the entire page stack of the navigator.
getDeviceBackButtonHandler() Retrieve the back button handler for overriding the default behavior.
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that's only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Events Summary #

Name Description
prepush Fired just before a page is pushed.
prepop Fired just before a page is popped.
postpush Fired just after a page is pushed.
postpop Fired just after a page is popped.

Methods

pushPage(pageUrl, [options]) #

Pushes the specified pageUrl into the page stack.

Parameters
Name Type Description
pageUrl String Page URL. Can be either a HTML document or a <ons-template>.
options Object Parameter object.
options.animation String Animation name. Available animations are "slide", "simpleslide", "lift", "fade" and "none".
options.onTransitionEnd Function Function that is called when the transition has ended.

insertPage(index, pageUrl, [options]) #

Insert the specified pageUrl into the page stack with specified index.

Parameters
Name Type Description
index Number The index where it should be inserted.
pageUrl String Page URL. Can be either a HTML document or a <ons-template>.
options Object Parameter object.
options.animation String Animation name. Available animations are "slide", "simpleslide", "lift", "fade" and "none".

popPage([options]) #

Pops the current page from the page stack. The previous page will be displayed.

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "slide", "simpleslide", "lift", "fade" and "none".
options.onTransitionEnd Function Function that is called when the transition has ended.

replacePage(pageUrl, [options]) #

Replaces the current page with the specified one.

Parameters
Name Type Description
pageUrl String Page URL. Can be either a HTML document or an <ons-template>.
options Object Parameter object.
options.animation String Animation name. Available animations are "slide", "simpleslide", "lift", "fade" and "none".
options.onTransitionEnd Function Function that is called when the transition has ended.

resetToPage(pageUrl, [options]) #

Clears page stack and adds the specified pageUrl to the page stack.

Parameters
Name Type Description
pageUrl String Page URL. Can be either a HTML document or an <ons-template>.
options Object Parameter object.
options.animation String Animation name. Available animations are "slide", "simpleslide", "lift", "fade" and "none".
options.onTransitionEnd Function Function that is called when the transition has ended.

getCurrentPage(): Object #

Get current page's navigator item. Use this method to access options passed by pushPage() or resetToPage() method.

Returns: Current page object.

getPages(): List #

Retrieve the entire page stack of the navigator.

Returns: List of page objects.

getDeviceBackButtonHandler(): Object #

Retrieve the back button handler for overriding the default behavior.

Returns: Device back button handler.

on(eventName, listener) #

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

once(eventName, listener) #

Add an event listener that's only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

off(eventName, [listener]) #

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

Events

prepush #

Fired just before a page is pushed.

Parameters
Name Type Description
event Object Event object.
event.navigator Object Component object.
event.currentPage Object Current page object.
event.cancel Function Call this function to cancel the push.

prepop #

Fired just before a page is popped.

Parameters
Name Type Description
event Object Event object.
event.navigator Object Component object.
event.currentPage Object Current page object.
event.cancel Function Call this function to cancel the pop.

postpush #

Fired just after a page is pushed.

Parameters
Name Type Description
event Object Event object.
event.navigator Object Component object.
event.enterPage Object Object of the next page.
event.leavePage Object Object of the previous page.

postpop #

Fired just after a page is popped.

Parameters
Name Type Description
event Object Event object.
event.navigator Object Component object.
event.enterPage Object Object of the next page.
event.leavePage Object Object of the previous page.

Discussion #