0

初めまして、よろしくお願い致します。
ons-navigatorを使用してページ制御しています。

htmlページを分けないで、ons-templateを使用して、
ons-sliding-menuでスライドメニュー表示をさせています。
その際、スライドメニュー中から、
リンクをクリックすると、別のページに遷移させており、
(コードだと、a.htmlに遷移する)
その後スライドメニューを自動で閉じる動きをさせたいのですが、
うまくいきません。

myNavigator.pushPage('a.html', {closeMenu: true})"

app.slidingMenu.setMainPage('a.html', {closeMenu: true})"
に書き換えるなどしたのですが、
ons-navigatorでページ制御を行っているせいか、
エラーとなり、ページ遷移後にメニューが表示されたままになってしまいます。
どなたかお知恵をお貸しください。
何卒よろしくお願い致します。

<ons-sliding-menu var="app.slidingMenu" menu-page="s-menu.html" main-page="login.html" side="right" type="overlay" max-slide-distance="200px" swipeable="false">
<ons-navigator var="myNavigator" page="login.html"></ons-navigator> 
</ons-sliding-menu>

<ons-template id="s-menu.html">
<ons-page modifier="menu-page" style="background-color: white">

    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent">
          <div class="right">
            <ons-toolbar-button class="menu-close" ng-click="app.slidingMenu.close()">
              </ons-icon>Close
            </ons-toolbar-button>
          </div>
    </ons-toolbar>

    <ons-list>
    
        <ons-list-item>
            メニュー
        </ons-list-item>

        <ons-list-item
            modifier="tappable" class="list__item__line-height"
            onclick="myNavigator.pushPage('a.html', {closeMenu: true})">
            &nbsp; ページa
        </ons-list-item>

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

1 件の回答 1

0

myNavigator.pushPage('a.html', {closeMenu: true})"

ons-navigatorcloseMenuというオプションは無いので、ここで指定しても上手く動かないと思います。
ons-sliding-menucloseMenu([options])というメソッドがあるので、pushPageと一緒に呼んであげると閉じます。
閉じるタイミングを調整したいのであれば、ons-navigatorのイベントを使用すると良い感じにできるかもしれません。

  • prepush : pageがpushされる直前に発火されます。
  • prepop : pageがpopされる直前に発火されます。
  • postpush : pageがpushされてアニメーションが終了してから発火されます。
  • postpop : pageがpopされてアニメーションが終わった後に発火されます。

詳細はOnsen UI Guideをご参照ください。

以下、サンプル

ons.bootstrap();
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/css/onsen-css-components.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/js/onsenui.min.js"></script>

<ons-sliding-menu var="app.slidingMenu" menu-page="s-menu.html" side="right" type="overlay" max-slide-distance="200px" swipeable="false">
  <ons-navigator var="myNavigator" page="login.html"></ons-navigator>
</ons-sliding-menu>

<ons-template id="s-menu.html">
  <ons-list>
    <ons-list-item>
      メニュー
    </ons-list-item>
    <ons-list-item modifier="tappable" class="list__item__line-height"
                   onclick="myNavigator.pushPage('a.html'), app.slidingMenu.closeMenu()">
      &nbsp; ページa
    </ons-list-item>
  </ons-list>
</ons-template>

<ons-template id="login.html">
  <ons-toolbar>
    <div class="right">
      <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()">
        <ons-icon icon="bars"></ons-icon>
      </ons-toolbar-button>
    </div>
    <div class="center">Login</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Login Page Contents</p>
</ons-template>

<ons-template id="a.html">
  <ons-toolbar>
    <div class="left">
      <ons-back-button>Back</ons-back-button>
    </div>
    <div class="center">A</div>
    <div class="right">
      <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()">
        <ons-icon icon="bars"></ons-icon>
      </ons-toolbar-button>
    </div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">A Page Contents</p>
</ons-template>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。