From d0a7778303bcfb5323e1cdb3c54218206042e1c7 Mon Sep 17 00:00:00 2001 From: Felix Schauerte Date: Wed, 16 Oct 2013 21:46:48 +0200 Subject: [PATCH 1/3] better angular integration - always execute a callback, even if none has been specified to force angular model sync - setup Swipe instance via $timeout to let nested directives finisch their dom manipulations before the instance is created. e.g. this allows usage of ng-repeat inside swiper --- swiper.js | 33 ++++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/swiper.js b/swiper.js index 2350c4e..244c41c 100755 --- a/swiper.js +++ b/swiper.js @@ -16,19 +16,30 @@ angular.module('swiper', []) if ( attrs.speed ) { config.speed = parseInt(attrs.speed,10); } - if ( attrs.onSlideEnd ) { - var onSlideEnd = $parse(attrs.onSlideEnd); - config.callback = function(e, index, slide) { - scope.$apply(function() { - onSlideEnd(scope, { index: index, slide: slide}); - }); + var onSlideEnd; + if (attrs.onSlideEnd) + onSlideEnd = $parse(attrs.onSlideEnd); + + config.callback = function (e, index, slide) + { + // apply with timeout to avoid stuttering transitions + $timeout( + function () + { + // always apply to propagate swipes status change to angular + if (onSlideEnd) + onSlideEnd(scope, + { index: index, slide: slide}); + }, 10 + ); }; - } var swiperProperty = attrs.swiper || 'swiper'; - var swiper = new Swipe(element[0], config); - - scope[swiperProperty] = swiper; + $timeout(function () + { + var swiper = new Swipe(element[0], config); + scope[swiperProperty] = swiper; + }); } - }; + } }); From 55c5c3a19ac0f14d402a0d3a02a38aee664a8097 Mon Sep 17 00:00:00 2001 From: Felix Schauerte Date: Wed, 16 Oct 2013 21:51:13 +0200 Subject: [PATCH 2/3] forgot this --- swiper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/swiper.js b/swiper.js index 244c41c..e6c69d0 100755 --- a/swiper.js +++ b/swiper.js @@ -1,5 +1,5 @@ angular.module('swiper', []) -.directive('swiper', function ($parse) { +.directive('swiper', function ($parse, $timeout) { return { scope: true, link: function(scope, element, attrs) { From a099935ad9ca24346cdafab5dd0b1b06f7fbc469 Mon Sep 17 00:00:00 2001 From: Felix Schauerte Date: Wed, 16 Oct 2013 22:13:50 +0200 Subject: [PATCH 3/3] use generic setter to allow dotted properties --- swiper.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/swiper.js b/swiper.js index e6c69d0..fdd3001 100755 --- a/swiper.js +++ b/swiper.js @@ -37,8 +37,8 @@ angular.module('swiper', []) var swiperProperty = attrs.swiper || 'swiper'; $timeout(function () { - var swiper = new Swipe(element[0], config); - scope[swiperProperty] = swiper; + var setter = $parse(swiperProperty).assign; + setter(scope, new Swipe(element[0], config)); }); } }