Onsen setMainPage callback not working

Question

In the following docs for onsen it shows that the setMainPage function has an optional property that allows you to specify a callback:

http://onsen.io/reference/ons-sliding-menu.html#method-setMainPage

It doesn't seem to work though, my callback doesn't appear to get fired. There are no errors or anything it just doesn't fire the callback. Here is my code:

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <title>My App</title>  

    <link rel="stylesheet" href="../lib/onsen/css/onsenui.css">  
    <link rel="stylesheet" href="../styles/onsen-css-components-blue-basic-theme.css">  
    <link rel="stylesheet" href="../styles/app.css"/>

    <script src="../lib/onsen/js/angular/angular.js"></script>
    <script src="../lib/onsen/js/onsenui.js"></script>
    <script src="../../cordova.js"></script>

    <script>
    var module = angular.module('app', ['onsen']);

    function show_hide() {
        console.log("Fired");    
    }
    </script>

</head>

<body>    

    <ons-navigator title="Navigator" var="myNavigator">
        <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left" var="menu" type="reveal" max-slide-distance="400px" swipable="true"></ons-sliding-menu>

        <ons-template id="menu.html">
            <ons-page modifier="menu-page">
                <ons-toolbar modifier="transparent"></ons-toolbar>

                <ons-list class="menu-list">

                    <ons-list-item class="menu-item" ng-click="menu.setMainPage('english/about-this-guidance.html', { closeMenu: true, callback: show_hide() })">
                        <ons-icon icon="fa-chevron-right"></ons-icon>
                        About this practice guidance
                    </ons-list-item>

                </ons-list>

            </ons-page>
        </ons-template>

        <ons-template id="page1.html">
            <ons-navigator title="Navigator" var="myNavigator">
                <ons-page>
                    <ons-toolbar>
                        <div class="center">Home</div>
                        <div class="right">
                            <ons-toolbar-button ng-click="menu.toggle()">
                                <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                            </ons-toolbar-button>
                        </div>
                    </ons-toolbar>

                    <ons-row>
                        <ons-col align="left">
                            <h1>Home</h1>
                        </ons-col>
                    </ons-row>
                </ons-page>
            </ons-navigator>
        </ons-template> 
    </ons-navigator>
</body>
</html>

Interestingly if I do the following:

<ons-list-item class="menu-item" ng-click="menu.setMainPage('english/about-this-guidance.html', { closeMenu: true, callback: 'show_hide()' })">

Then it will error because I'm passing a string when its expecting a function, so the callback does seem to be registering it just doesn't fire

i think it should be `ng-click="menu.setMainPage('english/about-this-guidance.html', { closeMenu: true, callback: show_hide() })` , removed '(single quotes) from callback function — Pankaj Parkar, Mar 18 '15 at 15:34
Thats what I have already. I added the single quotes as an example to show that it will error if the callback is set wrong — geoffs3310, Mar 18 '15 at 15:37

score 5 · Accepted Answer · answered Mar 19 '15 at 01:30

5

The syntax is correct, so I think the problem is perhaps in ng-click. Try with a show_hide() function inside an angular controller or use onclick instead. In this Codepen example, the first element in the menu uses ng-click and the second one onclick, and the console only registers the latter. Hope it helps!

answered Mar 19 '15 at 01:30

Fran Dios

3,482
2
15
26

2

You could also call `setMainPage` method inside the controller. – Andreas Argelius Mar 19 '15 at 03:16
There is a way to call a function on prepush? I'm using navigator and sliding menu, but I cannot figure out why my console.log isn't fired. This is my Codepen example http://codepen.io/anon/pen/zxgpVo The first time you go in the first tab navigation is all ok. But if you go on the second tab nothing happen and if you return on the first tab nothing happen again. I don't know why! – fraymas Apr 15 '15 at 08:56
1

The root of your project is a Sliding Menu and you are adding the events to the child Navigator on "ons.ready" (i.e. just the first time). However, as far as I understand, every time you use `setMainPage()` the child navigator is destroyed and a new one is created, so the events you added with "ons.ready" are lost. It would be better if you open a new question for this, so other people can check it and answer. – Fran Dios Apr 16 '15 at 03:52
Thank you @FranDios, I have opened another question here http://stackoverflow.com/questions/29669907/onsen-navigator-and-sliding-menu-function-on-prepush-doesnt-working . I hope someone can help me. – fraymas Apr 16 '15 at 08:59

Onsen setMainPage callback not working

1 Answers1