@@ -105,6 +105,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
105105
106106 . service ( 'DeviceCapabilities' , function ( ) {
107107
108+ // TODO: merge in a single function
109+
108110 // detect supported CSS property
109111 function detectTransformProperty ( ) {
110112 var transformProperty = 'transform' ,
@@ -185,15 +187,15 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
185187 transformFrom = offset < ( slideIndex * - 100 ) ? 100 : 0 ;
186188 degrees = offset < ( slideIndex * - 100 ) ? maxDegrees : - maxDegrees ;
187189 style [ DeviceCapabilities . transformProperty ] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)' ;
188- style [ 'transform -origin'] = transformFrom + '% 50%' ;
190+ style [ DeviceCapabilities . transformProperty + ' -origin'] = transformFrom + '% 50%' ;
189191 } else if ( transitionType == 'zoom' ) {
190192 style [ DeviceCapabilities . transformProperty ] = slideTransformValue ;
191193 var scale = 1 ;
192194 if ( Math . abs ( absoluteLeft ) < 100 ) {
193195 scale = 1 + ( ( 1 - distance ) * 2 ) ;
194196 }
195197 style [ DeviceCapabilities . transformProperty ] += ' scale(' + scale + ')' ;
196- style [ 'transform -origin'] = '50% 50%' ;
198+ style [ DeviceCapabilities . transformProperty + ' -origin'] = '50% 50%' ;
197199 opacity = 0 ;
198200 if ( Math . abs ( absoluteLeft ) < 100 ) {
199201 opacity = 0.3 + distance * 0.7 ;
@@ -226,6 +228,18 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
226228
227229 var requestAnimationFrame = $window . requestAnimationFrame || $window . webkitRequestAnimationFrame || $window . mozRequestAnimationFrame ;
228230
231+ function getItemIndex ( collection , target , defaultIndex ) {
232+ var result = defaultIndex ;
233+ collection . every ( function ( item , index ) {
234+ if ( angular . equals ( item , target ) ) {
235+ result = index ;
236+ return false ;
237+ }
238+ return true ;
239+ } ) ;
240+ return result ;
241+ } ;
242+
229243 return {
230244 restrict : 'A' ,
231245 scope : true ,
@@ -359,6 +373,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
359373 } ;
360374
361375 function goToSlide ( index , slideOptions ) {
376+ //console.log('goToSlide', arguments);
362377 // move a to the given slide index
363378 if ( index === undefined ) {
364379 index = scope . carouselIndex ;
@@ -513,11 +528,23 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
513528 }
514529
515530 if ( isRepeatBased ) {
516- scope . $watchCollection ( repeatCollection , function ( newValue , oldValue ) {
517- //console.log('repeatCollection', arguments);
531+ // use rn-carousel-deep-watch to fight the Angular $watchCollection weakness : https://github.com/angular/angular.js/issues/2621
532+ // optional because it have some performance impacts (deep watch)
533+ var deepWatch = ( iAttributes . rnCarouselDeepWatch !== undefined ) ;
534+
535+ scope [ deepWatch ?'$watch' :'$watchCollection' ] ( repeatCollection , function ( newValue , oldValue ) {
536+ //console.log('repeatCollection', currentSlides);
537+ var oldSlides = ( currentSlides || newValue ) . slice ( ) ;
518538 currentSlides = newValue ;
519- goToSlide ( scope . carouselIndex ) ;
520- } ) ;
539+ // if deepWatch ON ,manually compare objects to guess the new position
540+ if ( deepWatch && angular . isArray ( newValue ) ) {
541+ var activeElement = oldValue [ scope . carouselIndex ] ;
542+ var newIndex = getItemIndex ( newValue , activeElement , scope . carouselIndex ) ;
543+ goToSlide ( newIndex , { animate : false } ) ;
544+ } else {
545+ goToSlide ( scope . carouselIndex , { animate : false } ) ;
546+ }
547+ } , true ) ;
521548 }
522549
523550 function swipeEnd ( coords , event , forceAnimation ) {
0 commit comments