更改html5的源"src"，属性对angularjs不起作用 [英] Changing html5's source "src" attribute takes no effect wtih angularjs

问题描述

我有一个显示为链接的音频文件列表和一个<audio> html5播放器.每个链接都调用一个函数，该函数会更改<audio>中的<source>标记的src:

I have a list of audio files presented as links and an <audio> html5 player. Each link invokes a function which change the src of the <source> tag within the <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，则播放器会工作.

I can see the src changing, but nothing is played. The paths are ok; if I initialize the src with one of the paths, the player works.

我在做什么错了?

推荐答案

以下是几种有角度的方法:

Here is a couple of angular approaches :

1)使用ng-src =代替src =

1) Use ng-src= instead of src=

角度文档解释了为什么这样做: http://docs.angularjs.org/api/ng.directive:ngSrc

The angular docs explain why this works : http://docs.angularjs.org/api/ng.directive:ngSrc

在编译阶段，angular会将元素扩展为包含正确的src =属性.

During compilation stage, angular will expand the element to include the correct src= attribute.

这将更改HTML5音频元素的src属性，但不幸的是，这还不足以播放新的歌曲.您需要通过调用.play()方法来促使音频元素执行某些操作.

This will change the src attrib of the HTML5 audio element, but unfortunately that is NOT enough to make a new song play. You need to prod the audio element into doing something by calling the .play() method.

吸:(

沿着相同的路径进行进一步的黑客攻击建议在控制器内部进行DOM操作.通常这表明这是错误的解决方案.

Further hacking along this same path suggests doing DOM manipulation inside the controller. This is generally a sign that this is the wrong solution.

更好的解决方案是使用服务！！！

Better solution is to use services !!!

2)使用角度服务的音频

2) Audio using an angular service

// 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.

  }
});

现在，您可以在控制器中注入音频"，并进行任何需要的处理.

Now, in your controller(s), you can inject 'audio', and do whatever you need to do with it.

例如:

function myAstoundingAudioCtrl($scope, audio) { //<-- NOTE injected audio service

    $scope.songSelect = function(songPath) {
        audio.play(songPath);    //     <---  Thats All You Need !
    }
}

您现在可以将音频"作为参数添加到需要能够 更改音乐，并使用此处定义的相同API调用.

You can now add 'audio' as a parameter to any of your controllers that need to be able to change the music, and use the same API call defined here.

作为服务"，整个应用程序只有一个实例.所有对音频"的调用都指向同一个对象.对于所有角度服务都是如此.正是在这种情况下我们需要的.

Being a 'service', there is only a single instance for the whole application. All calls to 'audio' point to the same object. This is true for all services in angular. Just what we need in this case.

该服务在您的应用程序的根文档上创建了一个不可见的HTML5元素，因此无需在您的视图的任何位置添加标签.这具有在用户导航到不同视图的同时保持歌曲播放的额外好处.

The service creates an invisible HTML5 element on the root document of your application, so there is no need to add an tag on your views anywhere. This has the added bonus of maintaining the playing of the song whilst the user navigates to different views.

有关$的定义，请参见 http://docs.angularjs.org/api/ng .$文档.文档服务.

See http://docs.angularjs.org/api/ng.$document for the definition of the $document service.

希望有助于交配:)

这篇关于更改html5的源"src"，属性对angularjs不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！