Search code examples
javascripthtmlangularjshybrid-mobile-app

How to use navigator buttons to execute actions other than navigate between pages

Suppose I have the following snippet for an application using Onsenui:

<ons-navigator-toolbar title=""
    left-button-icon="fa fa-lg fa-edit"
    on-left-button-click="window.alert('asdf');"
    right-button-icon="fa fa-lg fa-plus"
    on-right-button-click="myAngularFunction();">
</ons-navigator-toolbar>

The functions for the events on-left-button-click and on-right-button-click are not getting called. Just functions to navigate between pages work (for instance, ons.screen.presentPage('other_page.html')).

Is this a known Onsenui limitation, a design principle or just a bug? Is there any way to overcome it?

Solution

  • It's AngularJS limitation.

    You cannot call function outside AngularJS.

    you can wrap window.alert function inside your controller function.

    Also, you need to set your controller above ons-navigator.

    If you use, ons-navigator-toolbar, its scope is not the page but the navigator scope. This is current limitation of Onsen UI, it is being resolved in the next version.