Search code examples
angularjsionic-frameworkhybrid-mobile-app

Why Ionic doesn't apply in-line css to dynamically newly added Ion slide?

I am trying implement ionic slide box with dynamic ion slide. I am using ng-repeat (don't know if collection-repeat should be used here or not) to multiply the <ion-slide> and handling the addition of new slide on on-slide-changed event like below:

var i = 0;
$scope.slideHasChanged = function($index) {
    if($index == $scope.data.news.length - 1) {
        $scope.data.news.push({title:'Test '+(++i)});
        $ionicSlideBoxDelegate.update();
    }
}

Its working fine, but its pushing new slide below the currently focused slide and its visible, which looks weird.

Also, when I removed every parent ionic element like <ion-view> and <ion-content> from the view and kept only <ion-slide-box> in entire page, its working fine without pushing new slide below, which I do not want since I have other logic behinds <ion-view> and <ion-content> ? So my question is how to make slide box working properly under view or content tag ?

below is my non-working code sample:

<ion-view hide-nav-bar="true">
   <ion-content class="row-center col-center">      
     <ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="false">
      <ion-slide ng-repeat="news in data.news">
            <h1>{{news.title}}</h1>
            <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg" />
      </ion-slide>
    </ion-slide-box>        
</ion-content>
</ion-view>

(Please note, slide box is working properly after I remove ion view and content from the page)

UPDATE
http://codepen.io/agupta1989/pen/MwGbOW?editors=101

After few trial and analysis in Chrome, I found on on-slide-change event, in controller, when I am adding new slide dynamically, Ionic failed to apply in-line css to newly added <ion-slide>. Please have look below: 

<div class="slider-slides" ng-transclude="" style="width: 1080px;"> 
    <!-- ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="0" style="width: 360px; left: 0px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(-360px, 0px) translateZ(0px);">
    <!-- Content ommitted -->
</ion-slide><!-- end ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="1" style="width: 360px; left: -360px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(-360px, 0px) translateZ(0px);">
    <!-- Content ommitted -->
</ion-slide><!-- end ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="2" style="width: 360px; left: -720px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(0px, 0px) translateZ(0px);">
    <!-- Content ommitted -->
</ion-slide><!-- end ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide">
    <!-- Content ommitted -->
</ion-slide>
    <!-- end ngRepeat: news in data.newsCards -->

Look at the last <ion-slide> which doesn't have the in line css. is it a bug or am I doing it in wrong way ?

Solution

  • Finally I end up with Swiper by Idangerous. It have very nice and rich set of API's, methods and events. Here is a link. Yes, I had to use $compile service from angular to compile those additional slides or html which needs to push dynamically while user swipe. Along with added dynamic slides, I managed to write little algorithm to clean up existing slides using removeSlides([0,1,2]) and add new slides using appendSlides() and prependSlides() vice versa.