$ionicSlideBoxDelegate not scrolling and not updating index

Question

I have a slide box inside a modal.

The slide box used to be inside the modal template, with the relevant functions inside a controller.

I realised that it was better to move it inside a directive, and move all the functions inside the directive's link function.

So, here's what I did:

The modal template calls only the directive: <my-directive></my-directive> and nothing else.

The directive code is the following:

angular.module('feedback', []).directive('myDirective', [
  '$ionicSlideBoxDelegate', '$rootScope', 'Info', function($ionicSlideBoxDelegate, $rootScope, Info) {
    var linkFunction;

    linkFunction = function(scope) {

      scope.data = {
        timestamp: new Date,
        details: {
          app: Info.getAppInfo(),
          device: Info.getDeviceInfo()
        },
        user: $rootScope.currentUser,
        message: ''
      };

      scope.slideChanged = function(index) {
        scope.slideIndex = index;
      };

      scope.disableSwipe = function() {
        $ionicSlideBoxDelegate.enableSlide(true);
      };

      scope.slideTo = function(index) {
        console.log("Got here...");
        console.log("Index is: ", index);
        $ionicSlideBoxDelegate.slide(index);
      };

    };
    return {
      restrict: 'E',
      replace: false,
      templateUrl: './directives/feedback/feedback.tpl.html',
      link: linkFunction
    };
  }
]);

and the template is the following:

<div>
    <ion-slide-box ng-init="disableSwipe()" on-slide-changed="slideChanged(index)" class="feedback-slider" show-pager="false">

        <ion-slide>
            <ion-item class="item-icon item-icon-right" ng-click="slideTo(1)">
        </ion-slide>

        <ion-slide>
        <button class="button button-positive button-clear no-animation"
                ng-click="slideTo(0)">Back</button>
        </ion-slide>

    </ion-slide-box>
</div>

This is a trip down version of the template, but it should be enough to explain what it's going on.

basically, none of the functions are called. I mean, they are called as the consoles are printed and are displaying the expected values, but it seams like everything related to $ionicSlideBoxDelegate are not fired, and I really don't understand why.

Any help?

Thanks

Answer 1

So,

After a lot of research and trying to debug the ionic function, I managed to solve this using the ionic forum at this link:

https://github.com/driftyco/ionic/issues/1865

Seams like the problem is when you have multiple sliders on you app, and it is a known issue within the ionic library.

I change my code like this:

$ionicSlideBoxDelegate.$getByHandle('feedbackDirective')._instances[0].enableSlide(false);

and added an handler in the html template as well:

   <ion-slide-box ng-init="disableSwipe()"
                       on-slide-changed="slideChanged(index)"
                       class="hg-feedback-slider"
                       show-pager="false"
                       delegate-handle="feedbackDirective">

                      ...

and now it's working properly again.