angularjs - 在angularjs中同步音频和动画

Question

我正在尝试将音频与 angularjs 中的动画同步。我在使用 jQuery 之前已经完成了它，但现在我已经将我的项目移植到了 angularjs，我试图坚持 angularjs 哲学。

在 jQuery 中，我为每个包含单词的 span 元素添加了一个 data-time="time"属性。我将所有时间都存储在一个数组中。当调用音频 play() 函数时，我使用了一个计时器来跟踪耗时。每隔一段时间，我会轮询计时器(每 10 毫秒，因为所有时间都四舍五入到最接近的 10 毫秒)。如果当前时间与数组中的当前时间匹配，我使用选择器查找其 data-time 属性包含当前时间的跨度。该跨度将通过向其添加“突出显示”类来突出显示。该计划运作良好。

但是在 angularjs 中，我试图在不使用选择器的情况下实现相同的目标。有谁知道我可以做到这一点的方法？有人告诉我，使用 jQuery 完成的任何事情都可以在 angularjs 中完成。

非常感谢。

Answer 1

跟踪时间的方式与将其存储在 $scope.currentTime 中的方式相同，并且只需使用 ng-class，例如，

<span ng-class="{highlight:currenttime == 910}">word</span>

这里的 910 将是您在 jquery 版本上分配给数据时间的任何内容。

如果你在 Angular 版本中重复单词，它可能是这样的

<span ng-repeat="word in words" ng-class="{highlight:currenttime == word.time}">{{word.text}}</span>