Ionic slide box inside of modal

1

I’ve got a shopping cart, when I click on an item in the shopping cart, I expect a modal to pop-up and display more images in a slide-box format.

I’ve got it working the first time I open the modal and it closes fine. However, once I start clicking on other items in the shopping cart, the modals open up but they’re all messed up. The slidebox stops working, different slides in the slidebox start overlapping, and it almost looks as if the scope gets removed from the modal because click events stop working.

The slides in the modal are created with an ng-repeat on a div as seen here :

  <ion-slide-box class='image-slider-box' does-continue='true'>
      <ion-slide ng-repeat='image in product.image'  class='image-slide'>
        <ion-content>
          <img src='{{image}}' class='image-slide'>
        </ion-content>
      </ion-slide>
    </ion-slide-box>

Here is the code in my directive :

$ionicModal.fromTemplateUrl('views/partials/cart-image-modal.html', {
      animation: 'slide-left-right',
      scope: scope
    }).
    then(function(modal){
      scope.modal = modal;
    });

    scope.openModal = function() {
      scope.modal.show();
      $timeout( function() {
        $ionicSlideBoxDelegate.update();
      });
    };

    scope.closeModal = function() {
      scope.modal.hide()
      .then(function(){
        scope.modal.remove();
      });
    };

Please let me know if I’m missing anything!

2

I fixed it by structuring the directive like this! Not exactly sure why it’s working, if someone can explain the real difference for me, I would appreciate it!

scope.closeModal = function() {
  scope.modal.hide();
};

element.on('click', function(){
  $ionicModal.fromTemplateUrl('views/partials/cart-image-modal.html', {
    animation: 'slide-left-right',
    scope: scope
  })
  .then(function(modal){
    scope.modal = modal;
    scope.modal.show();
    $timeout( function() {
      $ionicSlideBoxDelegate.update();
    });
  });

});
3

Take a look at this demo.

Slide-box is always a little tricky, they need some extra css love.

1 Like
4

Demo does not work. the slide box does not have any content.
I just found I have the same issue.

When I wrap the ion-slide content with extra <ion-content> the modal is empty. When there is no <ion-content> it works.

Any ideas?

Frank

5

ok its described here: