bug: cached slidebox directive causes width issue

[kaikcreator]

Type: bug

Platform: all

Looks like having a cached template with a slidebox, whose content is changed in controller, causes a width problem. It looks like from the second time we enter into the view, the ion-slide with gets the width of "slider-slides" element created by directive slide-box (whose width is the sum of widths of the slides)

An example that reproduces the problem can be found here: http://codepen.io/-kaik-/pen/PwjRKp

[kaikcreator]

I forgot to mention Ionic version: v1.0.0-beta.14

[PeBu]

Hallo kaikcreator,

this is not an Ionic-Issue ....

your controller causes the problem :

change the eventhandler in DemoCtrl

from $ionicView.beforeEnter -> $ionicView.loaded

$ionicView.beforeEnteris called every time before the view is shown

$ionicView.loaded is called only once by creation.

.controller('DemoCtrl',function($scope, $window, $ionicSlideBoxDelegate) {
    //call init view
    $scope.$on('$ionicView.beforeEnter'  -> change to $scope.$on('$ionicView.loaded

Good luck PeBu

[kaikcreator]

It is an Ionic-Issue. Maybe I'm not explained enough well.

The behaviour of my controller is exactly the one I want, because there's an issue on updating the content of a cached slidebox.

I mean, thing about an app that has a list of photo albums, and every time you press one of them, you load a view that contains a slidebox that display the pictures from that specific album.

With previous versions, no problem happened because every time an album is selected, the view with the slidebox is loaded from the scratch, so you can replace the images during the load time.

Now, with cached templates, the behaviour is: 1) first time I select an album, the view with the slidebox is created. 2) next times, the cached view is recovered, so the only place you have to update the content of the slidebox is, precisely, inside the $ionicView.beforeEnter, as I'm using. 3)The issue appears here. The slidebox does not behave as expected after replacing their content.

So clearly, unless there's another procedure to update the content of the slidebox that I am missing, there's a bug with the cached slidebox.

Cheers,

-KaiKreator-

[PeBu]

If you don't want to cache the tab-view content, you must disable the cache.

Do that in your stateProvider (cache: false)

.state('tabs.first', {
      url: "/first",
     cache:false,
      views: {
        'first-tab': {
          templateUrl: "templates/first.html",
          controller: 'DemoCtrl'
        }
      }

PeBu

[kaikcreator]

Ok, so there's no way, then, to update the content of a slide-box in a cached view?

I though it would be designed to being updateable.

It would make sense to cache a whole view with several elements where most of them are not going to change. But then, if the element that changes is a slidebox, we are forced to not cache the whole view.

Another example, where it would be interesting is the album list example from the previous comment. It would be interesting to cache the slidebox view, and inside the $ionicView.beforeEnter check if

• We are entering the album that is already cached (in that case nothing has to be done, the slidebox has the cached content and everybody is happy)
• We are entering a different album, and because of that, all the slidebox content has to be updated, and here (beforeEnter) is the right place to do it.

-K-

[mhartington]

Calling update() on enter fixes the issue.

http://codepen.io/mhartington/pen/wBpvOG

[kaikcreator]

Ok.

To avoid a disalignment for a few miliseconds, it would be better to include all the code that replaces the content of the slider in the on enter event.

Anyway, there's still an issue. The ion-slide-pager, does not update well: If you do navigate through the slider, changing the slides, after going to the second tab and returning to the first one, the pager shows more dots, than the number of slides it really exist.

I'm attaching a capture showing that there are no more slides, but pager indicates there are 2 slides pending.

[mhartington]

To avoid being on a slide that no longer exist, set the current slide to the first one in your array.

http://codepen.io/mhartington/pen/mypEzN

Please open another issue for the pager.

[psimondk]

Unfortunately the trick with $scope.$on('$ionicView.beforeEnter' does not work if you use does-continue and auto-play on your slide-box in which case the auto-play is not resumed when you re-enter the view.

For that to work the only solution right now is to not cache the view.

[psimondk]

However, if you use next like so. You might get lucky :)

  $scope.$on('$ionicView.beforeEnter', function (){
    if (typeof $rootScope.init !== 'undefined' && $rootScope.init) 
      $scope.init = true; // A terrible hacky way of battling a state machine - don't ask
    if ($scope.init)
    setTimeout(
      function () {
        $ionicSlideBoxDelegate.$getByHandle('my-handle').next();
      }, 10);
  });

After having played with various timeout combinations etc and almost all thinkable and unthinkable $ionicSlideBoxDelegate function call combinations as well cache / no cache on views, it is clear, that the slide-box code is in need of some serious attention.

Update: It turns out that .next() does not always wrap around.

[syarifuddinahmads]

hey, i have a problem in slidebox, am use service and controllers to showing data from wordpress, but my slide is can't showing firstime apps loaded

look at this...

https://forum.ionicframework.com/t/ionic-slide-box-not-showing-at-firtstime-need-to-resize-and-round-rotation-device-to-fix-slide-content/75225

thanks

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.