javascript - 可视元素更新时，带有Angular JS和“ Material ”网格列表的HTML音频不会更新音频元素

Question

我在AngularJS Material 中创建了一个网格列表。网格列表是使用ng-repeat从JSON文件生成的。每个磁贴都有独特的视觉元素，当您单击磁贴时，它将播放一个独特的音频文件。有四种语言(英语，西类牙语，中文，芬兰语)。更改语言会从每种语言唯一的JSON对象重新绘制新的网格列表。外观上一切正常。问题在于，语言改变时音频元素不会改变。当您切换到西类牙语，中文或芬兰语时，您将获得英语音频文件。
这是我的网格列表:

<md-grid-list md-cols="6" md-row-height="40px">
    <md-grid-tile ng-repeat="consonant in targetLanguageConsonants track by $index">

      <md-button ng-show="consonant.audioButton" ng-class="[consonant.color, consonant.classAudio]" ng-click="playAudio(consonant.phoneme)" aria-label="Play audio">
        <md-icon md-svg-src="media/icons/headphones.svg" aria-label="Listen to phoneme"></md-icon>
        <audio id="{{consonant.phoneme}}">
          <source ng-src="{{consonant.audioSource}}" type="{{consonant.audioType}}"></source>
        </audio>
      </md-button>

    </md-grid-tile>
  </md-grid-list>

这是 Controller 中的音频处理程序:

  $scope.playAudio = function(phoneme) {
    $scope.targetLanguageConsonants.forEach((consonant) => {
      if (consonant.phoneme === phoneme) {
        document.getElementById(consonant.phoneme).play();;
      }
    });
  };

记录 Controller 处理程序，将检索正确的音频源文件。检查图块，每个的 id是正确的。一切似乎都正常，但是更改语言后音频不会改变。我尝试了 $scope.$apply()，但收到了 already in progress错误。
一个可能的问题是，我不清楚何时在 {{}}中使用 ng-repeat双大括号。我的规则是在 ng-内不包含任何 {{}}。但是 ng-src="{{consonant.audioSource}}"需要 {{}}。
这是使用Chrome和FireFox。切换到Safari，即使控制台显示正在获取音频文件，音频文件甚至都不会播放。

Answer 1

解决此问题的最佳选择是使用以下指令进行:

app.directive('audiotrack', function($sce) {
  return {
    restrict: 'A',
    scope: { url:'=' ,id : '@',  },
    replace: true,
    template: '<audio id="{{id}}" ng-src="{{newUrl}}" controls></audio>',
    link: function (scope) {
        scope.$watch('url', function (newVal, oldVal) {
           if (newVal !== undefined) {
               scope.newUrl = $sce.trustAsResourceUrl(newVal);
           }
        });
    }
  };
});

并在ng-repeat部分的组件 View 中添加您的指令:

playing Audio Nº {{indexAudio}}
<ul>
    <li ng-repeat="audio in myAudios track by $index">
      <button ng-click="playAudio(audio,$index)" aria-label="Play audio">Play {{$index}}</button>
    </li>
</ul>
<div audiotrack url="selectedAudioUrl" id="myAudioPlayer"></div>

我创建了一个工作示例，在app.js文件中指令其定义，然后在示例的其余部分通过Home View :
现场演示链接:
https://stackblitz.com/edit/angularjs-7bmth3
和平我的佩罗斯:)