12309


初めまして、よろしくお願い致します。  
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でページ制御を行っているせいか、  
エラーとなり、ページ遷移後にメニューが表示されたままになってしまいます。  
どなたかお知恵をお貸しください。  
何卒よろしくお願い致します。

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-07-11T13:22:56.983
12278
2015-07-13T10:59:28.967
2015-07-13T10:59:28.967
8000
9757
question
monaca onsen-ui
ons-navigatorを使用してページ制御をしている際のons-sliding-menuの挙動について


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

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

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

詳細は[Onsen UI Guide](http://ja.onsen.io/reference/ons-navigator.html#events-
summary)をご参照ください。

以下、サンプル

[code]

    ons.bootstrap();
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-07-13T01:48:49.673
12309
2015-07-13T01:48:49.673
3516
12278
answer