使用 ng-repeat 在 AngularJS 中鼠标悬停时激活 .gif

Question

我已经使用 jQuery 看到了很多关于这个问题的答案。像这样： Stop a gif animation onload, on mouseover start the activation 和 Animating a gif on hover。 但我正在寻找一种使用角度的方法。我认为它应该与在 jQuery 中执行此操作时的想法相同。我想做的正是在第一个链接中提出问题的人想做的事情，但是角度：

1. 页面加载 => 停止所有 gif 的动画

2. 在鼠标悬停时 => 动画为那个 gif 开始

3. 在 mouseout => 动画再次停止该 gif

这是我的 HTML 中的内容：

<img class="projectGif" src="{{project.gifUrl}}" ng-mouseover="animation(project)">

我传递给动画函数的“项目”对象是我在代码中较早从 ng-repeat="project in projects" 获取的对象。然后在我的 JavaScript 中：

$scope.animation = function(project) {
    //not sure what to do here
};

我在 Angular 文档页面上四处寻找类似于 jQuery $(this).attr() 的内容，发现了 $attr 和 $set 之类的东西，我想也许我可以使用它们将我的 img 标签中的 src 设置为我的img的途径。就像$set('src', 'project.imgUrl')，但我在控制台中收到一个错误，上面写着$set is not defined。

所以我的主要问题是，我如何使用 Angular 来制作它，以便我的网页以静态 .gif（或 img 等）开头，然后在悬停时，将静态 .gif 更改为动画 .gif？

Answer 1

在纯 HTML 中

<img  ng-repeat="project in vm.projects"
      ng-src="{{project.gifUrl}}"
      ng-init="project.gifUrl=project.staticUrl"
      ng-mouseover="project.gifUrl=project.dynamicUrl"
      ng-mouseleave="project.gifUrl=project.staticUrl">

或混合解决方案：

HTML

<div ng-controller="myController as vm">
    <img ng-repeat="project in vm.projects"
         ng-src="{{project.gifUrl}}"
         ng-init="project.gifUrl=project.staticUrl"
         ng-mouseover="vm.setDynamic($index)"
         ng-mouseleave="vm.setStatic($index)">
</div>

JS

var vm = this;
vm.setDynamic = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].dynamicUrl; 
};
vm.setStatic  = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].staticUrl; 
};

请注意，我正在使用 ng-repeat 指令的 $index 特殊属性。有关ng-repeat 和$index 的更多信息，请参阅AngularJS ngRepeat API Docs

Answer 2

使用Animating a gif on hover 中的技术，创建一个directive，向其中提供静态 gif 和动画 gif 的 url，然后在鼠标悬停时在两个图像之间切换。

您也可以使用Extending Angular Directive中描述的技术

创建指令后，您的 html 可能类似于

<img ng-src="{{project.staticUrl}}" custom-src-on-mouseover="{{project.gifUrl}}">