Ionic上的图像缩放问题(Image zooming issue on Ionic)

Ionic上的图像缩放问题(Image zooming issue on Ionic)

我正在尝试在Ionic应用程序中实现图像缩放。 它已在这里实施

并且在使用Ionic V 1.0.0创建的原始项目上完美运行，但在Ionic V 1.3.0中似乎没有那么好用。

在V 1.1.0这个

（$ ionicScrollDelegate。$ getByHandle（'scrollHandle'+ slide）.getScrollPosition（））

记录这样的json

{ “左”：0， “顶部”：0， “缩放”：1}

但在V 1.3.0中它将其记录为

未定义

同样在chrome上它会显示如下警告：

句柄“scrollHandle0”的委托找不到具有delegate-handle =“scrollHandle0”的对应元素！ 没有调用getScrollPosition（）！ 可能的原因：如果您立即调用getScrollPosition（），并且您的delegate-handle =“scrollHandle0”元素是您的控制器的子元素，那么您的元素可能尚未编译。 在调用getScrollPosition（）时调用$ timeout，然后重试。

这仍然适用于设备（​​在iOS和Android上都经过测试）但根本不流畅。 这是非常迟钝的。 有什么想法或解决方法吗？

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?

最满意答案

所以这个问题与我在经过更多调试后意识到的Ionic版本无关。 这是由于

委托手柄= “scrollHandle {{$指数}}”

在我的用例中，我没有使用ng-repeat所以正在使用

代表手柄=“scrollHandle”

但这不起作用并导致上述问题。 因此修复是将0添加为索引。 在我的情况下，这解决了它。

代表手柄=“scrollHandle0”

在其他情况下，用例可能会有所不同，但如果使用ng-repeat，则可以使用

委托手柄= “scrollHandle {{$指数}}”

如果不是这应该做的伎俩

代表手柄=“scrollHandle0”

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"