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

0
votes

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 ?

2
angularjsionichybrid-mobile-app

2 Answers

0
votes

Here is a example that should help, you can change max slides or use a collection repeat (so you dont crash to app due to memory issues). EDIT: This is now working code with no wrapping

HTML: 

<title>Tabs Example</title>

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>


<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>


<script id="templates/tabs.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="Home" icon="ion-home" href="#/tab/home">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
      <ion-nav-view name="about-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
      <ion-nav-view name="contact-tab"></ion-nav-view>
    </ion-tab>

  </ion-tabs>
</script>

<script id="templates/home.html" type="text/ng-template">
 <ion-view view-title="Home">
    <ion-content class="padding">
        <ion-slide-box delegate-handle="news-cards" 
        on-slide-changed="slideHasChanged($index)" show-pager="false" > 
        <ion-slide ng-repeat="news in data.newsCards">
          <h1>{{news.title}}</h1>
          <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg" style="width:90%;"/> 
        </ion-slide> 
      </ion-slide-box>
   </ion-content>
  </ion-view>
</script>

<script id="templates/facts.html" type="text/ng-template">
  <ion-view view-title="Facts">
    <ion-content class="padding">
      <p>Banging your head against a wall uses 150 calories an hour.</p>
      <p>Dogs have four toes on their hind feet, and five on their front feet.</p>
      <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
      <p>A cockroach will live nine days without it's head, before it starves to death.</p>
      <p>Polar bears are left handed.</p>
      <p>
        <a class="button icon ion-home" href="#/tab/home"> Home</a>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/facts2.html" type="text/ng-template">
  <ion-view view-title="Also Factual">
    <ion-content class="padding">
      <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
      <p>1 in every 4 Americans has appeared on T.V.</p>
      <p>11% of the world is left-handed.</p>
      <p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
      <p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
      <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
      <p>
        <a class="button icon ion-home" href="#/tab/home"> Home</a>
        <a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/about.html" type="text/ng-template">
  <ion-view view-title="About">
    <ion-content class="padding">
      <h3>Create hybrid mobile apps with the web technologies you love.</h3>
      <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
      <p>Built with Sass and optimized for AngularJS.</p>
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/nav-stack.html" type="text/ng-template">
  <ion-view view-title="Tab Nav Stack">
    <ion-content class="padding">
      <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/contact.html" type="text/ng-template">
  <ion-view title="Contact">
    <ion-content>
      <div class="list">
        <div class="item">
          @IonicFramework
        </div>
        <div class="item">
          @DriftyTeam
        </div>
      </div>
    </ion-content>
  </ion-view>
</script>

CSS:

 .slider {
  height: 100%;
}
.slider-slide {
  padding-top: 40px;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

.slider-pager-page i{
}

JS:

  angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.facts', {
      url: "/facts",
      views: {
        'home-tab': {
          templateUrl: "templates/facts.html"
        }
      }
    })
    .state('tabs.facts2', {
      url: "/facts2",
      views: {
        'home-tab': {
          templateUrl: "templates/facts2.html"
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "templates/about.html"
        }
      }
    })
    .state('tabs.navstack', {
      url: "/navstack",
      views: {
        'about-tab': {
          templateUrl: "templates/nav-stack.html"
        }
      }
    })
    .state('tabs.contact', {
      url: "/contact",
      views: {
        'contact-tab': {
          templateUrl: "templates/contact.html"
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

})

.controller('HomeTabCtrl', function($scope, $ionicSlideBoxDelegate) {
  $scope.data = {
            newsCards: []
    }
  $scope.$on('$ionicView.enter', function(event,state) {
        event.preventDefault();
        $scope.data.newsCards = [{title:'abc'},{title:'xyz'},{title:'pqr'},{title: '123', title: '1234', title:'hello'}];
        $ionicSlideBoxDelegate.$getByHandle('news-cards').update();
    });

    var i = 0;
    $scope.slideHasChanged = function($index) {
        if($index == $scope.data.newsCards.length-1 && $index < 6) {
            $scope.data.newsCards.push({title:'Dummy'+(++i)});
      console.log($scope.data.newsCards);
            $ionicSlideBoxDelegate.$getByHandle('news-cards').update();
        }
        else if($index == 6) {
      alert($index);
            $ionicSlideBoxDelegate.slide($index-1);
        }
    }
});

Working Code Pen: http://codepen.io/anon/pen/pJVNKz

0
votes

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.