Failed to use delegate-handle for several instances of ion-slide-box

I have 3 ion-slide-box. Everyone has 3 items.

I created two buttons Next and back to simulate sliding by pressing them.

However delegate-handle doesn’t work. I get:

Delegate for handle "slider1" could not find a corresponding element with delegate-handle="slider1"! next() was not called!

Sounds like delegate-handle doesn’t register properly the instance ids.

This is what I have so far:

scope.nextSlider = function(sliderId){
         $timeout(function(){
             $ionicSlideBoxDelegate.$getByHandle(sliderId).next();
      }, 1000);       
      }

       scope.prevSlider = function(sliderId){         
         $timeout(function(){
             $ionicSlideBoxDelegate.$getByHandle(sliderId).previous();
      }, 1000);         
      } 

---

Template

 <ion-slide-box delegate-handle="{{sliderId}}" 
                       on-slide-changed="slideHasChanged(index)" 
                       show-pager="false">
      <ion-slide ng-repeat="color in colors">        
             <!-- -->
        </ion-slide>
    </ion-slide-box>

And this is a DEMO I play with

The issue was posted in Ionic Forum

[panurge-ws]

An universal directive to use random-generated delegate-handle (inspired to @mikesurowiec ) :

angular.module('app').directive('randomDelegateHandle', [function () {
  return {
    priority: 1000,
    restrict: 'A',
    compile: function compile(tElement, tAttrs, transclude) {
        tAttrs.$set('delegateHandle', Math.random().toString(36).substring(7));
        return function postLink(scope, iElement, iAttrs, controller) {}
    }
};

}]);

use:

ion-content random-delegate-handle

[thepi0]

I had a similar problem and asked it in StackOverflow and got a great temporary solution to the problem. See it at StackOverflow. So basically set and get the delegate-handle by id of the container.

Hopefully this can help someone in the future.