Angularjs:更改音频上的类已结束

我有小样本mp3文件，人们可以听，并用angularjs制作了一个小播放器。 单击播放图像时，音频播放，播放图像通过更改图像的类别更改为暂停图像

我想在音频停止播放时将图像更改回原来的状态

这是html：

<table class="loops">
<thead>
  <tr>
    <th ng-if="domein() == 'localhost' || domein() == 'basles.be'" class='tien weg'>Luister</th>
    <th ng-if="domein() == 'basslessons.be'" class='tien weg'>Listen</th>
    <th>Type</th>
    <th ng-if="domein() == 'localhost' || domein() == 'basles.be'" class='beschrijving'>Beschrijving</th>
    <th ng-if="domein() == 'basslessons.be'" class='beschrijving'>Description</th>
    <th class='tien'>Tempo</th>
    <th class='tien'>Download</th>
  </tr>
</thead>
<tr ng-animate="'animate'" ng-repeat="item in loops | filter: query | orderBy: sorteren:direction">
  <td>
    <img ng-class="class" ng-alt="play Button" height="25px" width="25px" ng-click="playTrack(item.loop_id)">
  </td>
  <td class="info" ng-if="item.loop_cat == 1">Drum Loop</td>
  <td class="info" ng-if="item.loop_cat == 2">Backing Track</td>
  <td class="info">{{item.beschrijving_nl}}</td>
  <td class="bpm">{{item.loop_bpm}} BPM</td>
  <td><a ng-href="loops/loops.php?serve={{item.loop_link}}"><img src="images/download.png" width="30" height="30" alt="Download WAV" /></a></td>
</tr>

控制台输出“结束”，但类不会变回“播放按钮播放”。知道为什么吗

（我的代码可能还有很多需要改进的地方，我刚开始使用angularjs，现在我只想让它工作起来）

---

提前谢谢你

如果在角度上下文之外执行任何操作，例如侦听DOM事件（例如侦听器$scope.audio.addEventListener（'ended'）），则需要调用$scope.$apply（）

因此，在您的代码中：

 $scope.audio.addEventListener('ended', function(){
    $scope.class = "playButton play";
    $scope.afspelen = false;
    $scope.$apply();  // <<<<
    console.log("ended ");
  });

$scope.audio.addEventListener（'end'，function（）{
$scope.class=“播放按钮播放”；
$scope.afspelen=false；
$scope.$apply（）；//您可能想查看html5音频元素：我确实查看了，但这会使播放器太大，无法满足我的需要。我没有位置，也不需要滑块或音量选项。最近几天我阅读了这篇文章并搜索了更多内容，但我没有什么可以使用的（只需一个简单的播放/停止按钮）你试过用ngAudio吗？谢谢，我会调查的
 $scope.audio.addEventListener('ended', function(){
    $scope.class = "playButton play";
    $scope.afspelen = false;
    $scope.$apply();  // <<<<
    console.log("ended ");
  });