我有作为链接呈现的音频文件的列表和< audio> html5播放器。每个链接调用改变< source>的src的函数。标签中的< audio> ;:
<audio controls="controls" preload="none"> <source type="audio/mpeg" src="{{selectedSongPath}}"/> </audio>
… …
<div class="songEntry" ng-repeat="song in songs">
<a href="" ng-click="songSelect(song.path)">{{song.name}}</a>
</div>
… …
$scope.songSelect = function(songPath) {
$scope.selectedSongPath = songPath;
}
我可以看到src改变，但什么都没有发挥。路径是确定的;如果我用一个路径初始化src，播放器工作。
我究竟做错了什么？
解决方法
这里有几种角度方法：
1)使用ng-src =而不是src =
角度文档解释了为什么这样工作：
http://docs.angularjs.org/api/ng.directive:ngSrc
在编译阶段，angular将展开元素以包含正确的src =属性。
这将更改HTML5音频元素的src属性，但不幸的是，这不足以使新的歌曲播放。你需要通过调用.play()方法来产生音频元素做某事。
吸：(
沿着这个相同的路径进一步黑客建议在控制器内部进行DOM操作。这通常是一个迹象，这是错误的解决方案。
更好的解决方案是使用服务！
2)使用角服务的音频
// Define a simple audio service mpApp.factory('audio',function ($document) { var audioElement = $document[0].createElement('audio'); // <-- Magic trick here return { audioElement: audioElement,play: function(filename) { audioElement.src = filename; audioElement.play(); // <-- Thats all you need } // Exersise for the reader - extend this service to include other functions // like pausing,etc,etc. } });
现在，在你的控制器，你可以注入“音频”，并做任何你需要做的。
例如：
function myAstoundingAudioCtrl($scope,audio) { //<-- NOTE injected audio service $scope.songSelect = function(songPath) { audio.play(songPath); // <--- Thats All You Need ! } }
现在，您可以将“音频”作为参数添加到任何需要能够使用的控制器
更改音乐，并使用此处定义的相同API调用。
作为一个“服务”，整个应用程序只有一个实例。所有对“audio”的调用都指向同一个对象。这是所有服务的角度。在这种情况下我们需要的。
该服务会在应用程序的根文档上创建一个不可见的HTML5元素，因此无需在任何位置在视图中添加标记。这在用户导航到不同视图时保持歌曲的播放有额外的好处。
请参阅http://docs.angularjs.org/api/ng. $ document定义$ document服务。
希望帮助交配:)
