时间戳

首页 > 解决方案 > 离子滑块不能从左到右工作

angularjs - 离子滑块不能从左到右工作

问题描述

我是 ionic 新手。我面临的问题是我正在尝试将离子滑块与 ng-repeat 一起使用。数据是动态的。如果我从右向左滑动，一切都会完美运行。但是如果我从左向右滑动出现菜单，我无法滑动内容。

这是我的html

    <ion-slide-box dynamic-height>
    <ion-slide ng-repeat="caseload in caseloads" dynamic-slides="caseloads">
    <img src="test.png">
    {{caseload.lastName}}
    DOB: {{caseload.dob}}   {{caseload.offenderSID}}<br/>
    {{caseload.leadState}}
    </ion-slide>
    </ion-slide-box>

这是我用于幻灯片的指令

应用程序.js

    app.directive('dynamicHeight', function() {
    return {
    require: ['ionSlideBox'],
    link: function(scope, elem, attrs, slider) {
        scope.$watch(function() {
            return slider[0].__slider.selected();
        }, function(val) {
            var newHeight = $('.slider-slide', elem).eq(val).innerHeight();
            if (newHeight) {
                elem.animate({
                    height: newHeight + 'px'
                }, 500);
            }
        });
    }
    };
    })

这是Controller.js

    function ($scope,$state,$http,$ionicSlideBoxDelegate) 
    {
    $http({
    method : 'POST',
    url : 'http://localhost:8080/ODIN/getLeadsByOfficerForMobile?
    dumId='+$scope.adminhome,
    }).then(function success(data) {
     if(data.data!=null){
        $scope.caseloads = data.data;

        console.log($scope.caseloads);
    }
    //$scope.playlists.splice(index, 1);
    });
    $ionicSlideBoxDelegate.update();
    }

谁能告诉如何解决这个问题？它非常适合从右到左滑动，但如果我从左到右滑动，主菜单会被拖动而不是滑动。

标签： angularjsionic-v1

解决方案

在您的控制器中使用以下代码。

注意：您必须在控制器中注入 $rootScope 和 $ionicSideMenuDelegate。

CodePen 供参考：“ https://codepen.io/mhartington/pen/sqJAp ”

  $rootScope.data = {
canDrag: false};

希望这有帮助:)

推荐阅读