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

问题描述

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

...

<a href="" ng-click="songSelect(song.path)">{{song.name}}</a>

...

$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) 使用角度服务的音频

//定义一个简单的音频服务mpApp.factory('audio',function ($document) {var audioElement = $document[0].createElement('audio');//<-- 这里的魔术返回 {音频元素:音频元素，播放:函数(文件名){audioElement.src = 文件名；audioElement.play();//<-- 这就是你所需要的}//读者练习 - 扩展此服务以包含其他功能//像暂停等}});

现在，在您的控制器中，您可以注入音频"，并对其进行任何您需要做的事情.

例如:

function myAstoundingAudioCtrl($scope, audio) {//<-- 注意注入的音频服务$scope.songSelect = function(songPath) {音频播放(歌曲路径)；//<--- 这就是你所需要的！}}

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

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

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

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

希望能帮到你 :)

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;
}

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.

What am I doing wrong?

解决方案

Here is a couple of angular approaches :

1) Use ng-src= instead of src=

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

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

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.

Sucks :(

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

eg:

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

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

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.

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.

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

Hope that helps mate :)

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