Image zooming issue on Ionic

Question

I am trying to implement image zooming for image in Ionic app. It has been implemented here

and works flawlessly on the original project created with Ionic V 1.0.0 but doesn't seem to work all that good in Ionic V 1.3.0.

On V 1.1.0 this

($ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition())

logs a json like this

{"left":0,"top":0,"zoom":1}

But in V 1.3.0 it logs it as

undefined

Also on chrome it shows warning like this:

Delegate for handle "scrollHandle0" could not find a corresponding element with delegate-handle="scrollHandle0"! getScrollPosition() was not called! Possible cause: If you are calling getScrollPosition() immediately, and your element with delegate-handle="scrollHandle0" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to getScrollPosition() and try again.

This is still working on devices (tested both on iOS and Android) but not smooth at all. It is very laggy. Any thoughts or workarounds?

Answer 1

So the issue had nothing to do with Ionic version which I realised after more debugging. It was due to

delegate-handle="scrollHandle{{$index}}"

In my usecase I was not using ng-repeat so was using

delegate-handle="scrollHandle"

But this was not working and causing the above mentioned issues. So fix was to add 0 as index with it. In my case this solved it.

delegate-handle="scrollHandle0"

In other cases use case may be different so but if using ng-repeat this would work

delegate-handle="scrollHandle{{$index}}"

and if not this should do the trick

delegate-handle="scrollHandle0"