我正在编写一个小型离子应用程序并遇到问题。我正在使用侧面菜单和标签。我的一个视图中有一个离子滑动盒,当我从左到右擦拭这个幻灯片时,侧面菜单滑出。我已经阅读了离子论坛上的各种相关主题,但没有一个有效。
我尝试将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;
})
答案 0 :(得分:39)
我在我的应用上使用了这样的东西:
.controller('AgendaCtrl', function($scope, $ionicSideMenuDelegate){
$scope.$on('$ionicView.enter', function(){
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function(){
$ionicSideMenuDelegate.canDragContent(true);
});
})
现在,当您离开视图时,它再次可以拖动。
答案 1 :(得分:7)
ion-side-menu-content drag-content="false"
将此代码放入ion-sidemenu
ion-pane
代码
答案 2 :(得分:2)
blk
这是示例代码跟随@Chetan Buddh的回答