bug: Slide-box wrong number of bullets at the pager

[yuda022]

Type: bug

Platform: mobile webview

hi,

I noticed unexpected behavior while using slide boxes.
I manage two slide boxes I navigate between. One has 2 slide elements and the other one has 5.

While loading the second slide box, on the setup function, the two slides of the previous slide box are still counted though they have the ng-leave -active tag that means they will be deleted, but after they were already counted, so the second slide box appear to have 7 elements instead of 5.

[gravitywp]

.disable-animations{
//Use this for transitions
&.ng-enter,
&.ng-leave,
&.ng-animate{
-webkit-transition: none !important;
transition: none !important;
}
//Use this for keyframe animations
&.ng-animate {
-webkit-animation: none 0s;
animation: none 0s;
}
}
add this class to ion-slide should disable default ngAnimation

[perrygovier]

@yuda022, can you put this in a codepen for us to inspect?

[rossholdway]

@kaikcreator created a codepen showing this in #3076. Adding the CSS does fix this issue (http://codepen.io/anon/pen/pJEJbb).

Pull request at: #3790

Thanks,
Ross

[yuda022]

thank you very match.

yehuda amar.

On Wed, May 20, 2015 at 4:51 PM, Ross Holdway [email protected]
wrote:

@kaikcreator https://github.com/kaikcreator created a codepen showing
this in #3076 #3076. Adding the
CSS does fix this issue (http://codepen.io/anon/pen/pJEJbb).

Pull request at: #3790 #3790

Thanks,
Ross

—
Reply to this email directly or view it on GitHub
#3646 (comment).

[dreamershl]

I encounter the similar issue. The following is what I figure out. hope it can help you for the fix. It seems the issue is caused by the closure variable "length". I believe once change the slide count function to use the element children length directly, the pager will be able to get the actual length. (at least the actual length at the calling time, instead of the pre-captured children length)

   this.slidesCount = this.count = function() { 

I am using the ng-repeat to adjust the slide count. The issue is the when the slides is changed, the pager will count those "ng-leave" elements too as stated above

The following are fundings for this issue

1. The Slide is using closure variable "length" instead of the latest element children length to report the number of slides

slides = element.children;
length = slides.length;

2. I am using the following code to adjust slides

  < ion-slide ng-repeat="slide in slides">...</ion-slide>

 $scope.$on('modal.shown', function (event, modal){
       $scope.slides = ....
  });

3. How Ionic slide box display process cause the issue.

   Although 'resize' is triggered before the 'shown' event, the handler of 'resize', using the 'timeout' is running after the 'shown' handler. Because of the ng-repeat animation process, when the "resize" handler is called, it will always capture the "ng-leave" elements.

   ionic.views.Modal.prototype.show.call(self);
   
   $timeout(function() {
   if (!self._isShown) return;
   modalEl.addClass('ng-enter-active');
   ionic.trigger('resize');
   self.scope.$parent && self.scope.$parent.$broadcast(self.viewType + '.shown', self);
   self.el.classList.add('active');
   self.scope.$broadcast('$ionicHeader.align');
    }, 20);
   

[rossholdway]

Hi @dreamershl

Yes, I also came to the same conclusion, the elements inserted by nganimate are counted. The code in pull request #3790 fixes this issue.

I've been using the fix #3790 in production for awhile now it's been working great.

Thanks,
Ross

[dreamershl]

:) sorry, didn't realize the fix is done. 👍

[rossholdway]

It just needs to be merged in to master now. I believe the target milestone has been updated to version 1.2 :)