更改html5的源“src”属性不会影响到angularjs

我有作为链接呈现的音频文件的列表和< audio> html5播放器。每个链接调用改变< source>的src的函数。标签中的< audio&gt ;:

<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服务。

希望帮助交配:)

原文地址：https://www.jb51.cc/html5/169423.html