angularjs - ng-class 被调用太多次

Question

我对 AngularJS 很陌生，我正在开发一个功能齐全的音频播放器，比如谷歌音乐。我有一个播放器服务，它处理所有的播放、排队等。我有一个包含所有任务的无限滚动表，我需要在正在播放的那个轨道上应用某个类。

我能想到的第一种角度方式是使用以下内容：

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

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

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

这样做的角度，有效的方式是什么？

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');
    })
  };
});

演示 plunkr