0

I am new to ionic.The problem i am facing is i am trying to use ionic slider with ng-repeat.The data is coming dynamically.Everything works perfectly if i swipe from right to left.But if i slide from left to right the menu appears and i am not able to swipe the content.

Here is my 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>

Here is the directive I am using for slide

app.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);
            }
        });
    }
    };
    })

Here is the 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();
    }

Can anyone tell how to solve this issue?It works perfectly for right to left swipe but if i swipe from left to right the main menu is dragged instead of slide.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Sachin HR
  • 450
  • 11
  • 28

1 Answers1

0

use below code in your controller.

Note: You have to inject $rootScope and $ionicSideMenuDelegate in controller.

CodePen for refrence : "https://codepen.io/mhartington/pen/sqJAp"

  $rootScope.data = {
canDrag: false};

Hope this help:)

  • Can i make drag content false only for that page?.Because i want to display menu on swipe in other pages except this page – Sachin HR May 31 '18 at 12:02