Отключить меню со стороны ионов только в определенном контейнере div

Я пытаюсь добавить слайдер изображения на свою страницу, но при прокрутке влево на слайдере изображения он также вызывает отображение бокового меню. Я все еще хочу, чтобы боковое меню работало на странице, а не в div, содержащем ползунок изображения.Отключить меню со стороны ионов только в определенном контейнере div

Ниже приведены соответствующие файлы с некоторыми разделами, опущенными для краткости. В принципе, страница index.html с именем clients.html вводится между тегами ion-nav-view в index.html. Эта страница клиентов имеет настраиваемую директиву под названием img-slider, чья html определена в файле directive.html. Ползунок изображения имеет контейнер «swiper container», и это контейнер, в котором я хочу, чтобы боковое меню было отключено. Любые события перетаскивания вне этого div должны по-прежнему запускать левое меню.

В случае, если это релевантно, слайдер изображения использует стороннюю библиотеку под названием Swiper.

index.html

<!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>

clients.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>

directive.html

<!-- 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>

directive.js

(function() { 
    angular.module('starter') 

    .controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) { 
     var vm = this; 

     $ionicSideMenuDelegate.canDragContent(false); 

     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" 
     }; 

    }); 

}());

источник

2015-08-12 ericgrosse

Я просто изменили свой код, добавив нг-шоу тег он работал для меня

<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>

и в directive.js файл

(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" 
      }; 

     }); 

    }());

Если у вас есть какие-либо вопросы, ответьте мне

источник

2015-08-14 06:56:04

Отключить меню со стороны ионов только в определенном контейнере div

ответ

Смежные вопросы