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

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

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.

Still appears to be messy using 1.0.0-rc.1

danfaber’s comment above was really useful in working out what the problem is, but the find() fn is not totally portable it seems 😦

I just created a very simple service to manage jumping between tabs in my application (which has lots of nested tabs, and breaks quickly using ionic’s built in tab delegate functions).

A horrible solution perhaps … but this is working very reliably for me at the moment, and it bypasses any need to touch the underlying ionic libs. The code below is verbose and non-optimal, but its easy to reason about, and portable.

// A fix for broken ionic tabs delegate

.factory('$tabs', ['$ionicTabsDelegate', function($ionicTabsDelegate) {
  return {
    get: function(handle) {

      var tabs = $ionicTabsDelegate._instances
      var theTab = undefined

      // Manually walk ionic's internal array of tabs, and find the matching tab
      // use angular's built in array iterator for best portability
      angular.forEach(tabs, function(v,k){
        if (v.$$delegateHandle === handle) {
          theTab = v
        }
      })
      return theTab
    },
    select: function(handle,position) {
      console.log('tabs select',handle,position)

      var theTab = this.get(handle)
      if (theTab !== undefined) {
        theTab.select(position)
      }
    }
  }
}])

Usage :

<ion-tabs delegate-handle="MainTabs">
 ....   lots of tabs in here
</ion-tabs>

.controller('myExamplecontroller', ['$tabs', function($tabs) {
    return {
       showFirstTab:  function() {
           $tabs.select('MainTabs',0)
       },
       showSecondTab:  function() {
           $tabs.select('MainTabs',1)
       },
      // etc
    }


}])

Based on @thepi0 's Link I could solve this problem. For someone who needs help, share code here. You can just put this on your controller. To get dynamically created index of the slide box like with ng-repeat

    $scope.getSlideBoxDelegateHandle = function(delegateIndex) {
        //get all the instances that ionic scroll delegate is handling
        var instances = $ionicSlideBoxDelegate["_instances"];
        //Create Instance you want to get
        var instance = null;
        for (var index in instances) {
            //set DelegateHandle value with your index
            //Ex) instances[index].$$delegateHandle = "slidebox"+index;
            //or just instances[index].$$delegateHandle = index;
            instances[index].$$delegateHandle = index;
            if (index == delegateIndex) {
                instance = instances[index];
            }
        }
            return instance; //return the instance        
    }

usage HTML

<div class="list" ng-repeat="myIndex in dynamics> <ion-slide-box delegate-handle="{{myIndex}}">

JS

$scope.slideIndex = $scope.getSlideBoxDelegateHandle(myIndex).currentIndex or anymethod;

Hello is this issue has been solved?

i still have same problem with generated delegate-handle

this is my code JS Controller $scope.swapName = "swap00"; $scope.ds = function (sN) { $ionicSlideBoxDelegate.$getByHandle(sN).enableSlide(false); }; HTML <ion-slide-box show-pager="false" delegate-handle="{{swapName}}" ng-init="ds(swapName)"> <ion-slide > 1 </ion-slide> <ion-slide > 2 </ion-slide> <ion-slide > 3 </ion-slide> </ion-slide-box>

i get this message: Delegate for handle “swap00” could not find a corresponding element with delegate-handle=“swap00”! enableSlide() was not called! Possible cause: If you are calling enableSlide() immediately, and your element with delegate-handle=“swap00” is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to enableSlide() and try again.