Question

我正在尝试将图像滑块添加到我的页面，但是当在图像滑块上向左滚动时，它会导致侧面菜单显示自己。我仍然希望侧面菜单在页面上工作，而不是在包含图像滑块的div中。

以下是相关文件，为简洁起见省略了一些部分。基本上，在index.html中的ion-nav-view标记之间注入了一个名为clients.html的页面。此客户端页面有一个名为img-slider的自定义指令，其html在directive.html中定义。图像滑块有一个容器＆＃34; swiper container＆＃34;，这是我希望禁用侧面菜单的容器。此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"
        };

    });

}());

Answer 1

我刚刚添加了一个适用于我的ng-show标记来修改你的代码

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

        });

    }());

并在 directive.js 文件中

$email = new CakeEmail('mandrillSmtp');
$encodedCsv = base64_encode(implode(",",$headers)); 
        //please note that i have debugged encodedCsv. No  errors here

        $email->subject('Report Test');
        $email->from('xxxxx@abc.com');
        $email->to('zzzzz@abc.com');
        $email->emailFormat('html');
        $email->attachments=array(
                array(
                    'content' => $encodedCsv,
                    'type' => "text/csv",
                    'name' => 'report.csv'
                )
            );
        $email->send();

如有任何疑问，请回复我

仅在特定div容器内禁用离子侧菜单

1 个答案: