Ionic framework 仅在特定div容器内禁用离子侧菜单
我试图添加一个图像滑块到我的页面，但当在图像滑块上向左滚动时，它会导致侧菜单也显示出来。我仍然希望侧菜单在页面上工作，而不是在包含图像滑块的div中 以下是相关文件，为简洁起见省略了一些部分。基本上，一个名为clients.html的页面被注入index.html中的ion nav视图标记之间。此客户端页面有一个名为img slider的自定义指令，其html在directive.html中定义。图像滑块有一个容器“swiper container”，这就是我希望禁用侧菜单的容器。此div之外的任何拖动事件仍应触发左侧菜单 如果相关，图像滑块将使用名为的第三方库 index.htmlIonic framework 仅在特定div容器内禁用离子侧菜单,ionic-framework,ionic,Ionic Framework,Ionic,我试图添加一个图像滑块到我的页面，但当在图像滑块上向左滚动时，它会导致侧菜单也显示出来。我仍然希望侧菜单在页面上工作，而不是在包含图像滑块的div中 以下是相关文件，为简洁起见省略了一些部分。基本上，一个名为clients.html的页面被注入index.html中的ion nav视图标记之间。此客户端页面有一个名为img slider的自定义指令，其html在directive.html中定义。图像滑块有一个容器“swiper container”，这就是我希望禁用侧菜单的容器。此div之外的
<!DOCTYPE html>
<html>
<head>
...
</head>
<body ng-app="starter">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="menuCtrl as vm">
<div class="list">
<div class="item">
<a href="#/clients">
<i class="icon ion-person-stalker"></i>
Clients
</a>
</div>
<div class="item">
<a href="#/appointments">
<i class="icon ion-calendar"></i>
Meetings
</a>
</div>
<div class="item">
<a href="#/products">
<i class="icon ion-pricetag"></i>
Products
</a>
</div>
<div class="item">
<a href="#/sales">
<i class="icon ion-social-usd"></i>
Sales
</a>
</div>
<div class="item" ng-click="vm.logout()">
Disconnect
</div>
</div>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</body>
</html>
<ion-view view-title="Commercial: Clients">
<ion-header-bar align-title="center">
<a href="#/" class="button icon-left ion-chevron-left button-clear button-dark"></a>
<h1 class="title">Commercial: Clients</h1>
<div class="buttons">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</div>
</ion-header-bar>
<ion-pane>
<ion-content>
<img-slider></img-slider>
</ion-content>
</ion-pane>
</ion-view>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
我刚刚修改了你的代码，添加了一个ng show标记，这对我很有效
<div class="swiper-container" ng-show="menu()">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
如果有任何疑问，请回复我我刚刚修改了您的代码，添加了一个ng show标记，这对我很有效
<div class="swiper-container" ng-show="menu()">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
(function () {
angular.module('starter')
.controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) {
var vm = this;
//$ionicSideMenuDelegate.canDragContent(false);
$scope.menu = function(){
$ionicSideMenuDelegate.canDragContent(false);
return true;
}
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
}])
.directive('imgSlider', function() {
return {
restrict: 'E',
templateUrl: 'app/directives/directive.html',
controller: "directiveCtrl"
};
});
}());