web-dev-qa-db-ja.com

タブの使用時にスワイプを無効にしてサイドメニューを表示する

私は小さなionicアプリを書いていて問題があります。サイドメニューとタブも使用しています。ionicスライドボックスを1つに持っています私の見解では、このスライドボックスを左から右にワイプすると、サイドメニューがスライドアウトします。ionicフォーラムでさまざまな関連トピックを読みましたが、どれもうまくいきませんでした。

さまざまなタグに_drag-content="false"_を追加して、コントローラーに$ionicSideMenuDelegate.canDragContent(false);を追加してみました。

どちらもうまくいきませんでした。これは、タブとタブ内のビューを備えたサイドメニューを使用しているためだと思います。私のコードはここにあります：

index.html

_    <ion-side-menus>

    <!-- Header bar -->
    <ion-side-menu-content ng-controller="NavCtrl" drag-content="false">
        <ion-nav-bar class="bar-positive">
            <ion-nav-back-button class="button-icon ion-ios7-arrow-back">
            </ion-nav-back-button>
        </ion-nav-bar>

        <!-- Page content -->
        <ion-nav-view drag-content="false" animation="slide-left-right"></ion-nav-view>
    </ion-side-menu-content> 

    <!-- Side menu -->
    <ion-side-menu side="left" class="side-menu">
        <ion-header-bar class="bar bar-header bar-dark">
            <h1 class="title">Menu</h1>
        </ion-header-bar>
        <ion-content has-header="true">

            <div ng-if="authData.Twitter" class="logged-in-user item item-avatar">
                <img ng-src="{{authData.Twitter.cachedUserProfile.profile_image_url}}"/>
                <h2>Hello, {{authData.Twitter.displayName}}</h2>
                <p>Logged in via Twitter</p>
            </div>

            <div ng-if="authData.facebook" class="logged-in-user item item-avatar">
                <img ng-src="{{authData.facebook.cachedUserProfile.picture.data.url}}"/>
                <h2>Hello, {{authData.facebook.displayName}}</h2>
                <p>Logged in via Facebook</p>
            </div>

            <ul class="list">
                <li>
                    <a class="item item-icon-left" menu-close nav-clear href="#/venue">
                        <i class="icon ion-ios7-location"></i>Venue
                    </a>
                </li>
                <li>
                    <a class="item item-icon-left" menu-close nav-clear href="#/lunch">
                        <i class="icon ion-pizza"></i>Lunch
                    </a>
                </li>
                <li>
                    <a class="item item-icon-left" menu-close nav-clear href="#/wifi">
                        <i class="icon ion-wifi"></i>Wifi
                    </a>
                </li>
            </ul>
        </ion-content>
        <ion-footer-bar class="bar bar-dark">
            <button class="button button-icon icon ion-log-out menu-close nav-clear" ng-controller="LoginCtrl" ng-click="logout()"> Logout</button>
        </ion-footer-bar>
    </ion-side-menu>  

  </ion-side-menus>
_

そして私の見解：

_<ion-view title="Agenda">
<ion-content drag-content="false">
    <ion-slide-box on-slide-changed="slideHasChanged($index)">
        <ion-slide>
            <div class="header-card header-card--image">
                <div class="overlay">
                    <div class="item item-text-wrap">
                        <h3 class="header-card__heading">Happening now</h3>
                        <img ng-src="img/me.jpeg" class="header-card__avatar"/>
                        <h2 class="header-card__heading">some guy</h2>
                        <p class="header-card__text">Some title</p>
                    </div>
                </div>
            </div>
        </ion-slide>
        <ion-slide>
            <div class="header-card header-card--image">
                <div class="overlay">
                    <div class="item item-text-wrap">
                        <h3 class="header-card__heading">Coming Next</h3>
                        <img ng-src="img/me.jpeg" class="header-card__avatar"/>
                        <h2 class="header-card__heading">Some guy</h2>
                        <p class="header-card__text">Slowly taking over the world</p>
                    </div>
                </div>
            </div>
        </ion-slide>
    </ion-slide-box>
    <ion-list>
        <ion-item ng-repeat="(id,agendaItem) in agendaItems" type="item-text-wrap" href="#/tab/agendaItem/{{agendaItem.$id}}" class="item item-avatar item-with-grid">
            <img ng-src="{{agendaItem.image}}">
            <p>{{agendaItem.startTime}} <i ng-if="agendaItem.hasNotificationSet == true" class="icon-left ion-ios7-bell"></i></p>
            <h2>{{agendaItem.title}}</h2>
            <p>{{agendaItem.speaker}}</p>
            <ion-option-button ng-class="agendaItem.hasNotificationSet ? 'button-balanced icon ion-ios7-bell' : 'button-positive icon ion-ios7-bell-outline'" ng-controller="NotificationCtrl" ng-click="add(agendaItem)"></ion-option-button>

            <!--<ion-option-button ng-click="getNotificationIds()"></ion-option-button>-->
        </ion-item>
    </ion-list>
</ion-content>
_

そして私のコントローラー：

_.controller('AgendaCtrl', function($scope, AgendaFactory, $ionicSideMenuDelegate, $rootScope, $ionicPopup, $timeout, $cordovaLocalNotification, NotificationFactory) {

    $ionicSideMenuDelegate.canDragContent(false); // doesn't seem to work

    var agendaItems = AgendaFactory.getAgenda();

    // Loop through agenda itens and check which have notifications set
    agendaItems.$loaded().then(function(array) {
        angular.forEach(array, function(value, key) {

        if (NotificationFactory.isNotificationScheduled(value.notificationId) == true) {
                value.hasNotificationSet = true;
        } else {
                value.hasNotificationSet = false;
        }

    });

    $scope.getNotificationIds = function () {
        $cordovaLocalNotification.getScheduledIds().then(function (scheduledIds) {
          console.log(scheduledIds);
        });
      };

        $scope.agendaItems = agendaItems;
    });

    $scope.firstTimeLogin = $rootScope.firstTimeLogin;

})
_
angularjsionic-frameworkionic
13
James J

私のアプリでは次のようなものを使用しています：

.controller('AgendaCtrl', function($scope, $ionicSideMenuDelegate){
  $scope.$on('$ionicView.enter', function(){
      $ionicSideMenuDelegate.canDragContent(false);
    });
  $scope.$on('$ionicView.leave', function(){
      $ionicSideMenuDelegate.canDragContent(true);
    });
})

これで、ビューを離れると、再びドラッグ可能になります。

39
Gian Franco Olivieri

ion-side-menu-content drag-content="false"このコードをion-sidemenuさんのion-pane 鬼ごっこ

12
Chetan Buddh
<ion-side-menus>
  <ion-side-menu-content drag-content="false">
  ............
  </ion-side-menu-content>
</ion-side-menus>

これは@Chetan Buddhの回答に従うサンプルコードです

2
vuhung3990