1

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

1 件の回答 1

1

ons-sliding-menusetSwipeableというメソッドがあるので、これを利用してあげれば切り替えられます。
もしくは

<ons-sliding-menu var="app.slidingMenu"(中略)swipeable="{{enable}}">
</ons-sliding-menu>

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

ons.bootstrap()
.controller('main', function($scope) {
  $scope.enable = true;
  $scope.toggleSwipeable = function() {
    $scope.enable = !$scope.enable;
    // スライドメニューの swipeable を切り替える
    app.slidingMenu.setSwipeable($scope.enable);
  };
});
<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>

2
  • ありがとうございます!! とりあえず、 <ons-sliding-menu var="app.slidingMenu"(中略)swipeable="enable"> </ons-sliding-menu> で対処しました
    – oxygen8
    2015年5月23日 14:33
  • @oxygen8 差し出がましいですが、メソッドが提供されているものに関しては、なるべくそちらを使用した方が安全な気がします(今後、内部的にどういう変更がされるか分からないので)。
    – ita_3y
    2015年5月24日 7:26

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

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