温泉 setMainPage 回调不工作

Question

在以下关于温泉的文档中，它表明 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()' })">

然后它会出错，因为当它需要一个函数时我正在传递一个字符串，所以回调似乎确实在注册它只是没有触发

Answer 1

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

温泉 setMainPage 回调不工作

Onsen setMainPage callback not working

javascript

angularjs

onsen-ui