我可以用角变量作为音频标签的来源？ [英] Can I use Angular variables as the source of an audio tag?

问题描述

我试图做到以下几点：

<div ng-repeat="audio in event.audios">
    <audio ng-src="/data/media/{{audio}}" controls></audio>
</div>

但是，当我加载视图中，{{音频}}变量没有解析，但很难coded到为正源。然而，如果例如，我把该音频代码的相同的变量以外它正确地呈现所述音频文件的名称。我已经使用src和NG-SRC无济于事尝试。

But when I load the view, the {{audio}} variable is not parsed but hardcoded into the source as is. However, if for example, I place that same variable outside of the audio tag it renders the name of the audio file correctly. I've tried using both src and ng-src to no avail.

有没有办法让变量音频标签内工作？

Is there a way to get the variable to work within an audio tag?

先谢谢了。

推荐答案

好吧，感谢theJoeBiz的输入和一些思考，围绕我解决了这个通过一个指令，这里是code：

Ok, thanks to theJoeBiz's input and some thinking around I solved this by making a directive, here is the code:

app.directive('audios', function($sce) {
  return {
    restrict: 'A',
    scope: { code:'=' },
    replace: true,
    template: '<audio ng-src="{{url}}" controls></audio>',
    link: function (scope) {
        scope.$watch('code', function (newVal, oldVal) {
           if (newVal !== undefined) {
               scope.url = $sce.trustAsResourceUrl("/data/media/" + newVal);
           }
        });
    }
  };
});

然后在模板，我用它像这样：

Then on the template I used it like so:

<div ng-repeat="audio in event.audios">
    <div audios code="audio"></div>
</div>

这是所有工作正常了。

It is all working fine now.

这篇关于我可以用角变量作为音频标签的来源？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！