温泉 setMainPage 回调不起作用答案

【问题标题】：Onsen setMainPage callback not working温泉 setMainPage 回调不起作用
【发布时间】：2015-03-18 15:12:55
【问题描述】：

在下面的 onsen 文档中，它显示 setMainPage 函数有一个可选属性，允许您指定回调：

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

但它似乎不起作用，我的回调似乎没有被触发。没有错误或任何不会触发回调的东西。这是我的代码：

<!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>

有趣的是，如果我执行以下操作：

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

然后它会出错，因为我在它期望一个函数时传递了一个字符串，所以回调似乎正在注册它只是不会触发

【问题讨论】：

您遇到错误了吗？它在什么方面不起作用？
不，没有错误，只是没有任何反应
我认为应该是 ng-click="menu.setMainPage('english/about-this-guidance.html', { closeMenu: true, callback: show_hide() }) ，从回调函数中删除了 '（单引号）
这就是我已经拥有的。我添加了单引号作为示例，以表明如果回调设置错误会出错

标签： javascript angularjs onsen-ui

【解决方案1】：

语法是正确的，所以我认为问题可能出在ng-click。尝试在角度控制器中使用 show_hide() 函数或改用 onclick。 In this Codepen example，菜单中第一个元素使用ng-click，第二个使用onclick，控制台只注册后者。希望对您有所帮助！

【讨论】：

你也可以在控制器内部调用setMainPage方法。
有没有办法在 prepush 上调用函数？我正在使用导航器和滑动菜单，但我无法弄清楚为什么我的 console.log 没有被触发。这是我的 Codepen 示例codepen.io/anon/pen/zxgpVo 第一次进入第一个选项卡导航一切正常。但是，如果您在第二个选项卡上没有任何反应，如果您在第一个选项卡上返回，则不会再发生任何事情。我不知道为什么！
您的项目的根是一个滑动菜单，您正在将事件添加到“ons.ready”上的子导航器（即只是第一次）。但是，据我了解，每次您使用 setMainPage() 时，子导航器都会被销毁并创建一个新导航器，因此您使用“ons.ready”添加的事件都会丢失。如果您为此打开一个新问题会更好，以便其他人可以检查并回答。
谢谢@FranDios，我在这里打开了另一个问题stackoverflow.com/questions/29669907/…。我希望有人可以帮助我。