当视觉元素更新时，具有Angular JS和Material网格列表的HMTL音频不更新音频元素

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>

这是我在控制器中的音频处理程序：

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

记录控制器处理程序，检索正确的音频源文件。检查瓷砖，每个瓷砖的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重复部分只需添加你的指令：

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文件中指示其定义，然后该示例的其余部分在主视图上：

现场演示链接：

https://stackblitz.com/edit/angularjs-7bmth3

和平我的佩罗斯：(