Question

在以下的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()' })">

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

Answer 1

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

温泉setMainPage回调无法正常工作

1 个答案: