Question

我需要将elevateZoom图像滑块添加到我的Angular应用程序中。以下是我的HTML代码。

<img id="zoom_03"
 ng-src='{{galaryImages[0].w320}}'
 data-zoom-image='{{galaryImages[0].original}}'/>

这里

{{galaryImages [0] .original}}

和

{{galaryImages [0] .w320}}

正在使用来自控制器的Ajax调用动态加载。 ng-src 正在成功运作。但由于我使用 data-zoom-image 作为较大的图像，因此在控制器获取结果之前执行该操作是因为由于缩放图像的分配而导致该设置无法正常工作到角度表达式 {{galaryImages [0] .original}} 。解决这个问题的解决方案是什么？有没有办法处理数据缩放图像等属性作为角度处理ng-src？或任何其他解决方案。

由于

Answer 1

在不知道ElevateZoom是什么的情况下，我建议你做两件事之一。第一个是创建一个自定义指令来处理这个问题。第二种是使用ng-attr。

使用ng-attr，您可以执行类似

的操作

  ng-attr-ng-src='{{galaryImages[0].w320}}'
  ng-attr-data-zoom-image='{{galaryImages[0].original}}'

我不确定如何提升缩放，如果它只是拍摄变量的快照，那么你将不得不做其他事情。如果它是为角度构建的并且绑定到变量，那么它应该可以工作。

如果你想让它等待，你可以像切换像

这样的布尔值来做这样的事情

<img id="zoom_03" ng-if="isLoaded"

默认情况下，你设置的地址加载为false，那么当你的ajax调用完成后，你将它设置为true

 .complete(function() {
   //apply your logic
   $scope.isLoaded = true;

ng-if将完全从dom中取出，并通过将isLoaded设置为true来评估何时将其重新启用。

注意：无论你采用哪种方式，我仍然建议你将它带入一个angular指令，它看起来像是一个jquery插件。最好的办法是把它放在一个指令中并通过指令应用逻辑，或找到一个已经建成角度的。如果你没有指令，你会发现很难将jquery逻辑用于角度。例如，这个插件可能会在document.ready上触发以查找自定义变量，在这种情况下ng-if不会工作。

如何在angularjs中使用数据图像和数据缩放图像属性

1 个答案: