我是AngularJS的新手,我正在开发一个全功能的音乐播放器 – 谷歌音乐.我有一个处理所有播放,排队等的播放器服务.我有一个包含所有任务的无限滚动表,我需要在正在播放的那首曲目上应用某个班级.
我能想到的第一个有角度的方法是使用类似下面的东西：
ng-class="{ playing: player.getCurrent()._id == song._id}"
在每一行.如果歌曲的id与播放器良好,播放的那个匹配,那么它将具有不同的颜色.问题在于,由于表中有很多行,因此需要在每个案例中评估表达式.在jQuery上,这将简单如下：
$('td[data-songid="'+playingId+'"]).addClass("playing").siblings(".playing").removeClass("playing");
这样做有棱有角,有效的方式是什么？
解决方法
您(几乎)总是可以自由地将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');
})
};
});
