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

ionic-v1
21

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:

22

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.

23

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
24

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.

25

ā€¦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!

26

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

27

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

1 Like
28

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

29

Which is the solution?

30

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.

31

See this :

32

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.

33

@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:

34

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
35

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 !

36

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?

37

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;
  }

}
38

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

39

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.

40

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