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

前端之家收集整理的这篇文章主要介绍了更改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.f2er.com/html5/169423.html

猜你在找的HTML5相关文章