Slides generated with ng-repeat causing issues (slide-box)

I am having similar issues. I tried the $ionicSlideBoxDelegate.update(); and it worked for the 0.9.27 release but failed in the nightly with the error below.

Error: [$injector:unpr] Unknown provider: $ionicSlideBoxDelegateProvider <- $ionicSlideBoxDelegate

Here is the updated codepen:

Dang… ALL of the delegates are now gone. They are nowhere in Master. I’m going to need to reach out to the devs to see what is up.

Did you try replacing setTimeout with $timeout:

.controller('HomeCtrl', function($scope, $stateParams, $timeout, $ionicSlideBoxDelegate, DataHandler) {

$scope.data = {};

$scope.data.random_artists = DataHandler.GetRandomArtists(3);
  $timeout(function(){
      $ionicSlideBoxDelegate.update();
  },5000);
}
1 Like

It’s official. Delegates are gone. The official replacement isn’t exactly clear yet. So, you’ll need to wait or drop down to 0.9.27 to continue using them.

…What? It’s somewhat disconcerting that they would be removed so late in the process to the 1.0 beta without a replacement in place yet. Hope this will be cleared up soon!

Also doesn’t work with $timeout. I’m gonna try ionicLoading and report back.

Here’s the commit docs for that : https://github.com/driftyco/ionic/commit/dbe4e3901d6ee70bae85e48b6e58c097b9f2810e

1 Like

Looks like the delegates are supposed to be replaced with controllers that are defined on the $scope. However, I am not seeing it on the $scope.

Getting this error upon refreshing in the code pen below:

Error: $scope.$ionicSlideBoxController is undefined

Which is the solution?

There is none yet.

In my case it seems the data that is used in my scope variable isn’t done processing yet before the view loads that contains the slidebox. This will probably not happen if you have a simple scope variable.

The slideboxDelegate update() function just doesn’t work though. But since the delegates will be removed completely in the 1.0 release it doesn’t make sense to invest in a solution for that issue. I say it’s best to wait until the beta is here and take it from there.

See this :

I am using the $ionicSlideBoxDelegate.update() with 0.9.27. When I get data back from $http, I call this method which corrects issues with the initial display of those items in the repeat loop. It is one line of code and one injection. Not a large investment.

@coen_warmer, are you using ajax for DataHandler.GetRandomArtists(3) ? If yes then you need a callback.

In your service:

.factory('DataHandler',function ($http){
  
   var GetRandomArtists = function(data, callback){
     $http.post(URL, data).success(function (response) {
         callback(response);
      });
   } 
})

In your controller:

    DataHandler.GetRandomArtists(3, function(response){
      $scope.data.random_artists = response;
      $ionicSlideBoxDelegate.update(); // you can use $timeout
   });

Hope this will help. :smile:

please some one upload a correct solution or atleast provide an alternative
because $ionicSlideBoxDelegate.update(); doesn’t seem to be working in my case

2 Likes

Hi, sorry for my english … :stuck_out_tongue:

I just add this:

 $('.slider-slides,.slider-slide').width('100%');

after that my slider is showing, it’s no very proper but that’s work !

I had $ionicSlideBoxDelegate.update(); in my code and actually wasnt seeing this in beta 11 but am now seeing it in 13. Was it re-introduced?

So here is what I found fixed the problem for me… It seems some left/right positioning was commented out in the latest beta, that caused this problem. You can either uncomment them in the core or just add this after you load ionic…

.slide-ios,
.slide-left-right-ios7,
.slide-right-left-ios7.reverse {
  > .ng-enter, &.ng-enter,
  > .ng-leave, &.ng-leave {
    right: -1px;    
    left: -1px;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
    z-index: 2;
  }

}
.slide-ios.reverse,
.slide-left-right-ios7.reverse,
.slide-right-left-ios7 {
  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
    right: -1px;    
    left: -1px;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
    z-index: 1;
  }

}

add fresh slides on every selection from drop down on same page and see the slider-pager dots it goes on increase not consistency if slides as 2 means dots are 4 it adds previous 2 also

You might consider trying the nightly and apply the “breaking changes” from the post that is pinned to the top of the forum. I have had similar issues that have been posted here. I have not had a chance to try the nightly changes but I am planning on doing that in the near future.

I know this is old, but I ran into this issue as well while using an ng-repeat on a slider. My solution was pretty simple:

expose $ionicSlideBoxDelegate;

controllersModule.controller("ViewObservationCtrl", ["$scope", "$ionicSlideBoxDelegate",
function ($scope, $ionicSlideBoxDelegate) {      
    
        $scope.updateSlider = function () {
            $ionicSlideBoxDelegate.update(); //or just return the function
        }
    });
....

Then on my view I called the update function with ng-init:

 <ion-slide ng-repeat="image in observation.images.image" ng-init="updateSlider()">                  
         <img src="...jpg"/>                
  </ion-slide>
8 Likes