# Work with $ionicSlideBoxDelegate and ng-repeat in beta6

**URL:** <https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587>\
**Category:** ionic-v1\
**Created:** [June 12, 2014, 10:45pm UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587 "2014-06-12T22:45:13Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![loicknuchel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loicknuchel/32/64528_2.png) [@loicknuchel](https://forum.ionicframework.com/u/loicknuchel)\
**Post date:** [June 12, 2014, 10:45pm UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/1 "2014-06-12T22:45:15Z")

</div>

Hi everyone,

I’m getting trouble to get the $ionicSlideBoxDelegate working with ng-repeat.  
I created a CodePen to show my problem : [http://codepen.io/anon/pen/ekDjt](http://codepen.io/anon/pen/ekDjt)

The delegate-handle seems to not work so I can’t set the wanted slide on slider start.  
Any idea ?

Thanks a lot

---

<div class="post-metadata">

**Author:** ![loicknuchel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loicknuchel/32/64528_2.png) [@loicknuchel](https://forum.ionicframework.com/u/loicknuchel)\
**Post date:** [June 13, 2014, 10:55am UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/2 "2014-06-13T10:55:58Z")

</div>

Hi,

I updated with beta7 but it didn’t fix the problem.  
I made a dirty hack to get it working ( [http://codepen.io/anon/pen/Ckygn](http://codepen.io/anon/pen/Ckygn) ) but it’s not ideal and I can’t access to $ionicSlideBoxDelegate…

If anyone has an idea, I will be really glad.

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [June 13, 2014, 11:14am UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/3 "2014-06-13T11:14:10Z")

</div>

> [@loicknuchel](#):
>
> [http://codepen.io/anon/pen/ekDjt](http://codepen.io/anon/pen/ekDjt)

You’re not injecting IonSlideBoxDelegate in your controller:

```
.controller('MyCtrl', function($scope) {

```

should be:

```
.controller('MyCtrl', function($scope, $ionSlideBoxDelegate) {

```

---

<div class="post-metadata">

**Author:** ![loicknuchel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loicknuchel/32/64528_2.png) [@loicknuchel](https://forum.ionicframework.com/u/loicknuchel)\
**Post date:** [June 13, 2014, 11:22am UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/4 "2014-06-13T11:22:05Z")

</div>

Thanks for your response.

But I don’t understand why $ionicSlideBoxDelegate is needed in controller. It’s only used in directive…  
Anyway, it didn’t seems to sole the problem ☹

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [June 13, 2014, 1:10pm UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/5 "2014-06-13T13:10:30Z")

</div>

Please read up on [http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate/](http://ionicframework.com/docs/api/service/%24ionicSlideBoxDelegate/)

If you want to update a slidebox after the page is compiled, you need to run `$ionicSlideBoxDelegate.update();` from your controller.

If you don’t inject $ionicSlideBoxDelegate in your controller, all the methods that that delegate provides (`stop()`, `update()`, `slideTo()`, etc.) won’t work.

---

<div class="post-metadata">

**Author:** ![loicknuchel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loicknuchel/32/64528_2.png) [@loicknuchel](https://forum.ionicframework.com/u/loicknuchel)\
**Post date:** [June 13, 2014, 1:24pm UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/6 "2014-06-13T13:24:05Z")

</div>

I read the doc but I can’t figure out how to get it working (even with update()).

Can you correct this CodePen : [http://codepen.io/anon/pen/wepsd](http://codepen.io/anon/pen/wepsd) ?

Thanks a lot for helping.

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [June 13, 2014, 1:41pm UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/7 "2014-06-13T13:41:23Z")

</div>

> [@loicknuchel](#):
>
> [http://codepen.io/anon/pen/wepsd](http://codepen.io/anon/pen/wepsd)

Just noticed you’re calling the slideTo function from your directive, instead of the controller.

Also, not quite sure why you would want to create a directive for this, seems the vanilla IonSlideBox would suit your needs just fine. I’ll see if I can fix your example.

---

<div class="post-metadata">

**Author:** ![loicknuchel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loicknuchel/32/64528_2.png) [@loicknuchel](https://forum.ionicframework.com/u/loicknuchel)\
**Post date:** [June 13, 2014, 2:29pm UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/8 "2014-06-13T14:29:56Z")

</div>

The code is the simplest example for demonstrating my problem.  
In my app, this slidebox is a bit more complicated and I made the directive because I want to create a reusable component…

Do you think there is a scope problem in the directive ?

---

<div class="post-metadata">

**Author:** ![mlv](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@mlv](https://forum.ionicframework.com/u/mlv)\
**Post date:** [June 16, 2014, 4:39pm UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/9 "2014-06-16T16:39:00Z")

</div>

I was having this issue as well, the problem is I am generating the slide boxes dynamically, which means the delegate-handles are supposed to be generated by angular, when I logged the $ionicSlideBoxDelegate, I could see that it had six instances but their delegate-handles weren’t being interpolated, they had the angular code as a string: “_slider-{{id}}_”, and I kept getting this error:

_Delegate for handle “slider-4” could not find a corresponding element with delegate-handle=“slider-4”! enableSlide() was not called!  
Possible cause: If you are calling enableSlide() immediately, and your element with delegate-handle=“slider-4” 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._

For this to work, I had to modify the slidebox source code, what I did was to add the delegateHandle attribute in the scope, so this way it is interpolated.

Like this:

```
scope: {
    ...,
    delegateHandle: '@'
}

```

and then I changed this line of code:

```
var deregisterInstance = $ionicSlideBoxDelegate._registerInstance(slider, $attrs.delegateHandle);

```

to:

```
var deregisterInstance = $ionicSlideBoxDelegate._registerInstance(slider, $scope.delegateHandle);

```

My delegate-handles are now being interpolated and I can also access the handles correctly.

Not sure if this is a “good” solution, hope it helps![quote=“loicknuchel, post:1, topic:5587, full:true”]  
Hi everyone,

I’m getting trouble to get the $ionicSlideBoxDelegate working with ng-repeat.  
I created a CodePen to show my problem : [http://codepen.io/anon/pen/ekDjt](http://codepen.io/anon/pen/ekDjt)

The delegate-handle seems to not work so I can’t set the wanted slide on slider start.  
Any idea ?

Thanks a lot  
[/quote]

---

<div class="post-metadata">

**Author:** ![gregkerzhner](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gregkerzhner/32/75584_2.png) [@gregkerzhner](https://forum.ionicframework.com/u/gregkerzhner)\
**Post date:** [January 15, 2015, 10:04pm UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/10 "2015-01-15T22:04:43Z")

</div>

I also had to follow @mlv’s strategy. I defined my own ionSlideBox directive with a higher priority, that was almost identical to the regular ionSlideBox directive, but included @mlv’s overrides.

```
angular.module('ion-slide-box-override', [

])
.config(function($provide){
    $provide.decorator('ionSlideBoxDirective', ['$delegate', function($delegate) {
        //$delegate is array of all ng-click directive
        //in this case first one is angular buildin ng-click
        //so we remove it.
        $delegate.shift();
        return $delegate;
    }]);
})
.directive('ionSlideBox', function($timeout, $compile, $ionicSlideBoxDelegate, $ionicHistory) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    prioriy: 10000000,
    scope: {
      autoPlay: '=',
      doesContinue: '@',
      slideInterval: '@',
      showPager: '@',
      pagerClick: '&',
      disableScroll: '@',
      onSlideChanged: '&',
      delegateHandle: '@',
      activeSlide: '=?'
    },
    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
      var _this = this;
      function isDefined(value) {return typeof value !== 'undefined';}
      var continuous = $scope.$eval($scope.doesContinue) === true;
      var shouldAutoPlay = isDefined($attrs.autoPlay) ? !!$scope.autoPlay : false;
      var slideInterval = shouldAutoPlay ? $scope.$eval($scope.slideInterval) || 4000 : 0;

      var slider = new ionic.views.Slider({
        el: $element[0],
        auto: slideInterval,
        continuous: continuous,
        startSlide: $scope.activeSlide,
        slidesChanged: function() {
          $scope.currentSlide = slider.currentIndex();

          // Try to trigger a digest
          $timeout(function() {});
        },
        callback: function(slideIndex) {
          $scope.currentSlide = slideIndex;
          $scope.onSlideChanged({ index: $scope.currentSlide, $index: $scope.currentSlide});
          $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
          $scope.activeSlide = slideIndex;
          // Try to trigger a digest
          $timeout(function() {});
        }
      });

      slider.enableSlide($scope.$eval($attrs.disableScroll) !== true);

      $scope.$watch('activeSlide', function(nv) {
        if(angular.isDefined(nv)){
          slider.slide(nv);
        }
      });

      $scope.$on('slideBox.nextSlide', function() {
        slider.next();
      });

      $scope.$on('slideBox.prevSlide', function() {
        slider.prev();
      });

      $scope.$on('slideBox.setSlide', function(e, index) {
        slider.slide(index);
      });

      //Exposed for testing
      this.__slider = slider;

      var deregisterInstance = $ionicSlideBoxDelegate._registerInstance(
        slider, $scope.delegateHandle, function() {
          return $ionicHistory.isActiveScope($scope);
        }
      );
      $scope.$on('$destroy', deregisterInstance);

      this.slidesCount = function() {
        return slider.slidesCount();
      };

      this.onPagerClick = function(index) {
        void 0;
        $scope.pagerClick({index: index});
      };

      $timeout(function() {
        slider.load();
      });
    }],
    template: '<div class="slider">' +
      '<div class="slider-slides" ng-transclude>' +
      '</div>' +
    '</div>',

    link: function($scope, $element, $attr, slideBoxCtrl) {
      // If the pager should show, append it to the slide box
      if($scope.$eval($scope.showPager) !== false) {
        var childScope = $scope.$new();
        var pager = jqLite('<ion-pager></ion-pager>');
        $element.append(pager);
        $compile(pager)(childScope);
      }
    }
  };}
)
```

---

<div class="post-metadata">

**Author:** ![jfspencer](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@jfspencer](https://forum.ionicframework.com/u/jfspencer)\
**Post date:** [January 29, 2015, 11:39pm UTC](https://forum.ionicframework.com/t/work-with-ionicslideboxdelegate-and-ng-repeat-in-beta6/5587/11 "2015-01-29T23:39:02Z")

</div>

I am having the same issue, I will use the custom directive until a formal solution is found. Thanks.