添加带滑动菜单的导航器后，Onsen UI menu.toggle() 无法正常工作

Question

我想在我的滑动菜单页面之前添加一个页面。我成功地做到了这一点。但是，现在我无法访问 menu.toggle(); 我记录了菜单对象，上面写着未定义。我也试过 navi.menu 但这似乎也不起作用。这是我得到的最接近的解决方案，但没有 menu.toggle Onsen UI - Using Slide-Menu just for specifics pages 这是我的代码

<ons-navigator title="Navigation" var="navi" page="homePage.html">

    </ons-navigator>

    <ons-template id="homePage.html">
        <ons-page ng-controller="mainPageController">
            <ons-toolbar>
                <div class="center">PHPTRAVELS</div>
                <div class="right">
                    <ons-toolbar-button>Exit</ons-toolbar-button>
                </div>
            </ons-toolbar>
            <ons-row class="home-page">
                <ons-col>
                    <ons-list>
                        <ons-list-item modifier="tappable" 
                            style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[2].status"
                            ng-click="navi.pushPage('home.html')">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-building" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Hotels</div>
                                    <div class="description">Find the perfect hotel room</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[6].status || modules[7].status">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-plane" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Flights</div>
                                    <div class="description">Get the best flight</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[3].status">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-briefcase" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Tours</div>
                                    <div class="description">Your vacation awaits</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[1].status">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-car" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Cars</div>
                                    <div class="description">Seek a deal on wheels</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[0].status">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-leanpub" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Blog</div>
                                    <div class="description">Travel news portal</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                    </ons-list>
                </ons-col>
            </ons-row>
        </ons-page>
    </ons-template>

    <ons-sliding-menu
        menu-page="menu.html" main-page="home.html" side="left"
        var="menu" type="reveal" max-slide-distance="260px">
    </ons-sliding-menu>

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

        <br><br>
        <ons-list class="menu-list">
            <ons-list-item menuitem class="menu-item selected" ng-click="menu.setMainPage('home.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-home"></i>
                &nbsp;&nbsp;Home
            </ons-list-item>

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-calendar"></i>
                &nbsp;&nbsp;Browse Hotels
            </ons-list-item>

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-gift"></i>
                &nbsp;&nbsp;Special Offers
            </ons-list-item>        

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('blog.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-th-list"></i>
                &nbsp;&nbsp;Blog
            </ons-list-item>        

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('mybookings.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-user"></i>
                &nbsp;&nbsp;My Bookings
            </ons-list-item>        

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('contactus.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-map-marker"></i>
                &nbsp;&nbsp;Contact Us
            </ons-list-item>        

        </ons-list>

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

    <ons-template id="home.html">
    <!-- <ons-navigator var="nav"> -->
      <ons-page ng-controller="homeController">
        <ons-toolbar>
          <div class="left">
            <ons-toolbar-button ng-click="menu.toggle();">
              <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
            </ons-toolbar-button>
          </div>
          <div class="center text-center">PHPTRAVELS</div>
          <div class="right">
            <ons-toolbar-button>
                <!-- <ons-icon icon="refresh" size="30px" spin="{{isFetching}}" fixed-width="true"></ons-icon> -->
                <ons-icon icon="ion-load-c" ng-show="isFetching" spin="{{isFetching}}"></ons-icon>
            </ons-toolbar-button>
          </div>
        </ons-toolbar>
<div>some text</div>
</ons-page>


</ons-template>

Answer 1

滑动菜单的方法 toggle()、open() 和 close() 已弃用。

您可以改用 toggleMenu([options]) 方法：http://onsen.io/reference/ons-sliding-menu.html#method-toggleMenu

好像你想要在滑动菜单之前有一个页面，所以我做了一个小例子： http://codepen.io/argelius/pen/XJOQwy

添加带滑动菜单的导航器后，Onsen UI menu.toggle() 无法正常工作

Onsen UI menu.toggle() is not working after adding navigator with sliding menu

angularjs

onsen-ui