0

angularjs でオーディオとアニメーションを同期させようとしています。jQueryを使用する前にそれを行いましたが、プロジェクトをangularjsに移植したので、angularjsの哲学に固執しようとしています.

jQuery では、単語を含む各スパン要素に data-time="time" 属性を追加しました。すべてのタイミングを配列に保存しました。audio play() 関数が呼び出されたとき、経過時間を追跡するためにタイマーを使用しました。間隔を置いてタイマーをポーリングします（すべてのタイミングが最も近い10ミリ秒に丸められたため、10ミリ秒ごと）。現在の時刻が配列内の現在のタイミングと一致する場合は、セレクターを使用して、data-time 属性が現在の時刻を保持しているスパンを見つけました。そのスパンは、「ハイライト」クラスを追加することで強調表示されます。スキームは十分に機能しました。

ただし、angularjs では、セレクターを使用せずに同じことを達成しようとしています。これを行う方法を知っている人はいますか？jQueryを使用して行うことはすべてangularjsで行うことができると言われています。

どうもありがとう。

4

1 に答える 1

0

$scope.currentTime に保存するのと同じ方法で時間を追跡し、次のような ng-class を使用するだけです。

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

ここでの 910 は、jquery バージョンで data-time に割り当てていたものです。

angularバージョンで単語を繰り返している場合は、次のようになります

<span ng-repeat="word in words" ng-class="{highlight:currenttime == word.time}">{{word.text}}</span>
于 2014-05-25T19:20:02.120 に答える