如何在 angularjs 中使用 data-image 和 data-zoom-image 属性

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 作为更大的图像，它在控制器获取结果之前执行，因为 elevateZoom 脚本无法正常工作，因为 zoom-image 被分配给 angular 表达式，即 {{galaryImages[0].original}}。克服这个问题的解决方案是什么？有没有什么方法可以像 angular 处理 ng-src 一样处理数据缩放图像之类的属性？或任何其他解决方案。

谢谢

Answer 1

在不知道 elevateZoom 到底是什么的情况下，我可以建议您执行以下两项操作中的一项。首先是创建一个自定义指令来处理这个问题。第二个是使用 ng-attr.

使用 ng-attr，你可以做类似

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

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

如果你想让它等待，你可以这样做，比如切换一个布尔值，比如

<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 插件。最好的办法是将其放入在一个指令中并通过指令应用逻辑，或者找到一个已经为 angular 构建的逻辑。如果没有指令，您会发现很难将 jquery 逻辑用于 angular。例如，此插件可能会在 document.ready 上触发以查找自定义变量，在这种情况下 ng-if 将无法工作。

如何在 angularjs 中使用 data-image 和 data-zoom-image 属性

How to use data-image and data-zoom-image attributes in angularjs

angularjs

angularjs-directive

custom-data-attribute