I have made a slidebox using Ionic that has an ng-repeat inside of it:
ng-repeat=“week in weeks”;
Now weeks is an array that dynamically changes by unshift ( add an item to the beginning of the array then move all items up ). This works great! also the IonicSlideBoxDelegate updates nicely after i’ve changed the array. But now i want the slideboxdelegate to slide to the previous item… but this does nothing, i guess because:
I’ve been planning to ask this for a while, I’ve only seen it solved by using a timeout around it… Typically causing race conditions on very slow devices by doing so…
When I do setup callbacks, would that be desireable as a PR on git? In my opinion a framework should offer optional callbacks for everything that’s async from other code, but might be that ionic thinks different about this.(I’ve had many discussions about this statement before)
var ASyncFunction = function(callback) {
//Do something asynchronous.. HTTP call, timeout, interval etc (even eventlisteners)
$timeout(function(){
callback( "we call this when the async call was finished" );
}, 5000);
return "asynccall started";
};
var returnVal = ASyncFunction(function( callbackReturnValue ){
console.log( callbackReturnValue ); // Only fired after the async, in this case 5 second delay timeout has finished ("we call this when the async call was finished")
});
console.log( returnVal ); //"asynccall started"'
So, what happens here, we give you the original return value (or no return value, doesn’t matter) when the function was ended. But the function did something asyncrhonous, so we don’t know when that’s finished. Therefore we created a callback method that only fires after the asynchronous thing has ended.
In this particular case, apparently $IonicSlideBoxDelegate.update(); does something asynchronous (I haven’t looked in the code what exactly though, it probably fires an event that get’s handled by some directive), but offers no callback method.
With a callback method, it would look like this:
$IonicSlideBoxDelegate.update( function() {
//This would get executed only after .update has finished
//Typically: $IonicSlideBoxDelegate.previous(); could be fired here correctly
} );
But we have to manually implement this since it is not implemented in the framework (yet?). That’s why I asked @mhartington if it would be viable for a pull request on git, so it might be implemented in the framework… Not really usefull if ionic team doesn’t support my opinion on callback policy
I’d first open an issue to check on why callbacks aren’t allowed before putting the word in.
Have you tried wrapping the delegate functions in functions to hack it together? Haven’t dealt too much with promised, but could these help you out in anyways?
Is there any update on this issue? We are also facing the same problem when we try to set the activeSlide after an slideBox is updated. Even we we give a timeout before setting the active slide we sometimes see issue where the slide box is sliding to a wrong index as the slidesCount() is returning old value
Yes i’m having the same problems with a dynamic slidecount… Can’t seem to figure out when it is happening though… I’m experiencing jumps in the active slide. Don’t know if this is specifically my bug or ionic’s bug… But i’m expecting that it is my bug… I’ll try to figure it out
We also see the same problem. We noticed that even when the setup of the slidebox is completed as part of ionicslideboxDelegate update, the slides in the slide box are not removed even though they are marked as dirty. Hence the slide count is still the old value as the dirty elements are yet to be removed.
You can check the data structure “slides” in the setup function of ionic.views.Slider object when your update call is executing. You will see that the slides that are marked for removal are still there inside the slider object.
This somehow, when i update the slidebox set the myActiveWeekSlide variable to 1 instead of the desired 3 extra loaded slides. Which resulted in a visual jump in weeks. Even though everything was updated correctly.
I solved this issue by doing something a little different than you.
I did this:
var extraWeeks = weekDate.loadMore('left', cache.get('settings', 'extraSlides'),
date.getDateFromMoment(moment($rootScope.weeks[0]._date, ["DD-MM-YYYY"]).subtract(1, 'week')));
for(var x = 0; x < extraWeeks.length; x++){ // For each loaded week
$rootScope.weeks.unshift(extraWeeks[x]); // Add each loaded week
$rootScope.weekSlides++; //Update slides count
$rootScope.currentWeekSlide++; //Update the current week index (for current week button purposes)
$rootScope.myActiveWeekSlide++; //Update the Active week slide
} //At this point myActiveWeekSlide = 3
$scope.$apply();
$ionicSlideBoxDelegate.update();
//At this point, myActiveWeekSlide is mysteriously 1?
$rootScope.myActiveWeekSlide = <Number of extra slides var here> extraSlides
//This solved the problem, making it 3 once more
Thank you biswarup, for directing me in the right direction
EDIT
I found an even better solution, the last posted solution was good, but still some sort of a workaround which still caused a very slight visual bug.
Using the code below solves the problem all together without workarounds and no visual bugs:
//All the extraMonth getting things above, not relevant
for(var x = 0; x < extraWeeks.length; x++){
$rootScope.weeks.unshift(extraWeeks[x]);
}
viewBase.loadTimelinesWeekOrMonth($rootScope.weeks, "weekDays");
$scope.$apply();
$rootScope.weekSlides += extraWeeks.length;
$rootScope.currentWeekSlide += extraWeeks.length;
$rootScope.myActiveWeekSlide += extraWeeks.length;
$ionicSlideBoxDelegate.update();
The solution was to not update the weekSlides, currentWeekSlide and myActiveWeekSlide variables in a loop, but after the array was actually finished. This allowed for the slideChanged function not to be called everytime it passed the loop
