angularjs - ng-class 被调用太多次

Question

我是 AngularJS 的新手，我正在开发一个功能齐全的音频播放器，如 Google Music。我有一个处理所有播放、排队等的播放器服务。我有一个包含所有任务的无限滚动表，我需要在正在播放的轨道上应用某个类。

我能想到的第一种 Angular 方法是使用如下所示的方法:

ng-class="{ playing: player.getCurrent()._id == song._id}"

在每一行。如果歌曲的 id 与播放器正在播放的歌曲相匹配，那么它将具有不同的颜色。问题是，由于表中有很多行，因此需要在每个案例上评估表达式。在 jQuery 上，这很简单:

$('td[data-songid="'+playingId+'"]).addClass("playing").siblings(".playing").removeClass("playing");

这样做的有 Angular 的有效方法是什么？

Answer 1

您(几乎)总是可以自由地将 jQuery 包装在指令中:

鉴于:

<table song-highlight>
  <tr ng-repeat="s in songs" data-songid="{{s.id}}">
   <td>...</td> 
  </tr>
</table>

在JS中:

app.directive('songHighlight', function(){
  return function($scope, $element, $attrs){
    $scope.$watch('playingId', function(playingId){
      $element.find('tr').removeClass('playing');
      $element.find('tr[data-songid="' + playingId + '"]').addClass('playing');
    })
  };
});

Demo plunkr