

ons-sliding-menuを使用してアプリを作っています。  
未ログイン時にはmodal画面を表示させ、ログインを促す使用にしているのですが、画面をスワイプさせると、ons-sliding-
menuのメニュー画面が表示されてしまい、せっかくのmodal画面がスルーされてしまいます。  
<http://ja.onsen.io/reference/ons-sliding-menu.html>
ここを見たところswipeableという項目があるのですが、どう使えばいいかわかりません。どなたかご教授お願いします。


CC BY-SA 3.0
2015-05-21T07:13:31.093
10451
2015-07-20T09:27:52.297
8748
question
monaca
Slidingmenueを使用時にmodal画面を出した時、スライドさせないようにするには


`ons-sliding-menu`に[setSwipeable](http://ja.onsen.io/reference/ons-sliding-
menu.html#method-setSwipeable)というメソッドがあるので、これを利用してあげれば切り替えられます。  
もしくは

[code]

    <ons-sliding-menu var="app.slidingMenu"（中略）swipeable="{{enable}}">
    </ons-sliding-menu>
    
[/code]

こんな感じに直接属性を変更することも可能です。

[code]

    ons.bootstrap()
    .controller('main', function($scope) {
      $scope.enable = true;
      $scope.toggleSwipeable = function() {
        $scope.enable = !$scope.enable;
        // スライドメニューの swipeable を切り替える
        app.slidingMenu.setSwipeable($scope.enable);
      };
    });
[/code]

[code]

    <head>
      <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
      <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
      <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
      <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
    </head>
    <body ng-controller="main">
        <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
        </ons-sliding-menu>
    </body>
    
    <ons-template id="menu.html">
      <ons-page style="background-color: white">
        <ons-list>
          <ons-list-item
              modifier="tappable" class="list__item__line-height"
              onclick="app.slidingMenu.setMainPage('page1.html', {closeMenu: true})">
              <i class="fa fa-home fa-lg" style="color: #666"></i>
              &nbsp; Page 1
          </ons-list-item>
    
          <ons-list-item
              modifier="tappable" class="list__item__line-height"
              onclick="app.slidingMenu.setMainPage('page2.html', {closeMenu: true})">
              <i class="fa fa-gear fa-lg" style="color: #666"></i>
              &nbsp; Page 2
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-template>
    
    <ons-template id="page1.html">
      <ons-navigator>
         <ons-page>
              <ons-toolbar>
                  <div class="left">
                      <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
                  </div>
                  <div class="center">Page 1</div>
              </ons-toolbar>
    
              <div style="text-align: center">
                  <h1>Page 1</h1>
                  <ons-button
                      ng-click="app.slidingMenu.toggleMenu()">
                      Toggle Menu
                  </ons-button>
                  <div style="margin-top:5px">
                    <ons-button
                        ng-click="toggleSwipeable()">
                        Toggle Swipeable
                    </ons-button>
                    <span>Swipeable：{{enable}}</span>
                  </div>
                  <p> Click "Toggle Menu" to close/open menu, </p>
                  <p> You can also swipe the page left/right.  </p>
                  <img src="images/ico_swipe_right_s.png" alt="">
              </div>
          </ons-page>
      </ons-navigator>
    <ons-template>
[/code]


CC BY-SA 3.0
2015-05-21T08:14:34.737
10456
2015-05-21T08:14:34.737
3516
10451
answer