fix(slides): compile cloned nodes. Fixes #4764

Author: mlynch

js/angular/directive/slides.js

@@ -55,7 +55,9 @@ function($animate, $timeout) {
       this.update = function() {
         $timeout(function() {
           _this.__slider.update();
-          _this.__slider.createLoop();
+          if(_this._options.loop) {
+            _this.__slider.createLoop();
+          }
 
           // Don't allow pager to show with > 10 slides
           if (_this.__slider.slides.length > 10) {
@@ -81,8 +83,10 @@ function($animate, $timeout) {
         preloadImages: false
       }, options);
 
+      this._options = newOptions;
+
       $timeout(function() {
-        var slider = new ionic.views.Swiper($element.children()[0], newOptions);
+        var slider = new ionic.views.Swiper($element.children()[0], newOptions, $scope);
 
         _this.__slider = slider;
         $scope.slider = _this.__slider;
@@ -102,15 +106,18 @@ function($animate, $timeout) {
     }
   };
 }])
-.directive('ionSlidePage', [function() {
+.directive('ionSlidePage', ['$timeout', function($timeout) {
   return {
     restrict: 'E',
     require: '?^ionSlides',
     transclude: true,
     replace: true,
     template: '<div class="swiper-slide" ng-transclude></div>',
     link: function($scope, $element, $attr, ionSlidesCtrl) {
-      ionSlidesCtrl.rapidUpdate();
+      $timeout(function() {
+        ionSlidesCtrl.rapidUpdate();
+      })
+
     }
   };
 }]);

js/views/slidesView.js

@@ -21,6 +21,7 @@
     Swiper
     ===========================*/
     var Swiper = function (container, params) {
+
         if (!(this instanceof Swiper)) return new Swiper(container, params);
 
         var defaults = {
@@ -418,6 +419,9 @@
         // Velocity
         s.velocity = 0;
 
+        // Remove duplicated slides
+        var $compile = angular.element(s.wrapper).injector().get('$compile');
+
         /*=========================
           Locks, unlocks
           ===========================*/
@@ -2048,7 +2052,7 @@
           ===========================*/
         // Create looped slides
         s.createLoop = function () {
-            // Remove duplicated slides
+
             s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass).remove();
 
             var slides = s.wrapper.children('.' + s.params.slideClass);
@@ -2061,18 +2065,32 @@
                 s.loopedSlides = slides.length;
             }
 
-            var prependSlides = [], appendSlides = [], i;
+            var prependSlides = [], appendSlides = [], i, scope, newNode;
             slides.each(function (index, el) {
                 var slide = $(this);
                 if (index < s.loopedSlides) appendSlides.push(el);
                 if (index < slides.length && index >= slides.length - s.loopedSlides) prependSlides.push(el);
                 slide.attr('data-swiper-slide-index', index);
             });
             for (i = 0; i < appendSlides.length; i++) {
-                s.wrapper.append($(appendSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));
+              newNode = angular.element(appendSlides[i]).clone().addClass(s.params.slideDuplicateClass);
+              newNode.removeAttr('ng-transclude');
+              newNode.removeAttr('ng-repeat');
+              scope = angular.element(appendSlides[i]).scope();
+              newNode = $compile(newNode)(scope);
+              angular.element(s.wrapper).append(newNode);
+                //s.wrapper.append($(appendSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));
             }
             for (i = prependSlides.length - 1; i >= 0; i--) {
-                s.wrapper.prepend($(prependSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));
+                //s.wrapper.prepend($(prependSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));
+
+              newNode = angular.element(prependSlides[i]).clone().addClass(s.params.slideDuplicateClass);
+              newNode.removeAttr('ng-transclude');
+              newNode.removeAttr('ng-repeat');
+
+              scope = angular.element(prependSlides[i]).scope();
+              newNode = $compile(newNode)(scope);
+              angular.element(s.wrapper).prepend(newNode);
             }
         };
         s.destroyLoop = function () {

test/html/slides.html

@@ -27,24 +27,12 @@ <h2>Journey to HD 219134 b</h2>
             <p>
               <img src="exoplanet.jpg" style="max-width: 100%" />
             </p>
-            <p>
-              <img src="exoplanet.jpg" style="max-width: 100%" />
-            </p>
-            <p>
-              <img src="exoplanet.jpg" style="max-width: 100%" />
-            </p>
-            <p>
-              <img src="exoplanet.jpg" style="max-width: 100%" />
-            </p>
-            <p>
-              <img src="exoplanet.jpg" style="max-width: 100%" />
-            </p>
-            <p>
-              <img src="exoplanet.jpg" style="max-width: 100%" />
-            </p>
             <div style="text-align: center">
               <small style="font-style: italic">An artist's rendering of your new home.</small>
             </div>
+            <div>
+              <button class="button button-assertive" ng-click="doClick()">Tap</button>
+            </div>
           </ion-content>
         </ion-slide-page>
         <ion-slide-page>
@@ -131,6 +119,10 @@ <h2>Life on HD 219134 b</h2>
         //$scope.slider.slideNext();
       }, 1000)
 
+      $scope.doClick = function() {
+        console.log('CLICK');
+      }
+
       /*
       $scope.extraSlides = [];
       var i = 0;