Fix dynamic slides

ionic-team · Dec 9, 2015 · 7fe987c · 7fe987c
1 parent 5d68ba6
commit 7fe987c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/js/angular/directive/slides.js b/js/angular/directive/slides.js
@@ -54,6 +54,7 @@ function($animate, $timeout) {
       this.update = function() {
         $timeout(function() {
           _this.__slider.update();
+          _this.__slider.createLoop();
 
           // Don't allow pager to show with > 10 slides
           if (_this.__slider.slides.length > 10) {
@@ -62,6 +63,14 @@ function($animate, $timeout) {
         });
       };
 
+      this.rapidUpdate = ionic.debounce(function() {
+        _this.update();
+      }, 50);
+
+      this.getSlider = function() {
+        return _this.__slider;
+      };
+
       var options = $scope.options || {};
 
       var newOptions = angular.extend({
@@ -97,6 +106,9 @@ function($animate, $timeout) {
     require: '?^ionSlides',
     transclude: true,
     replace: true,
-    template: '<div class="swiper-slide" ng-transclude></div>'
+    template: '<div class="swiper-slide" ng-transclude></div>',
+    link: function($scope, $element, $attr, ionSlidesCtrl) {
+      ionSlidesCtrl.rapidUpdate();
+    }
   };
 }]);
diff --git a/test/html/slides.html b/test/html/slides.html
@@ -16,13 +16,6 @@
       <ion-title>Hello</ion-title>
     </ion-header-bar>
     <ion-content class="padding">
-<!--
-      <ks-swiper-container override-parameters="{'loop':true}">
-    <ks-swiper-slide class="swiper-slide" ng-repeat="s in [1,2,3,4]">
-      <img ng-src="http://api.randomuser.me/portraits/thumb/men/{{s}}.jpg">
-    </ks-swiper-slide>
-</ks-swiper-container>
--->
       <ion-slides options="options">
         <ion-slide-page>
           <h2>Journey to HD 219134 b</h2>
@@ -105,10 +98,22 @@ <h2>Life on HD 219134 b</h2>
   </ion-pane>
   <script>
     angular.module('slidesTest', ['ionic'])
-    .controller('MyCtrl', ['$scope', function($scope) {
+    .controller('MyCtrl', ['$scope', '$interval', function($scope, $interval) {
       $scope.options = {
         loop: true
       }
+      /*
+      $scope.extraSlides = [];
+      var i = 0;
+      var c = $interval(function() {
+        $scope.extraSlides.push({
+          id: ++i
+        })
+        if(i > 2) {
+          $interval.cancel(c);
+        }
+      }, 2000)
+      */
     }]);
     </script>
   </body>