我可以使用 Angular 变量作为音频标签的来源吗? [英] Can I use Angular variables as the source of an audio tag?
问题描述
我正在尝试执行以下操作:
<audio ng-src="/data/media/{{audio}}" 控件></audio>
但是当我加载视图时,{{audio}} 变量没有被解析,而是按原样硬编码到源中.但是,例如,如果我将相同的变量放在音频标签之外,它会正确呈现音频文件的名称.我试过同时使用 src 和 ng-src 都无济于事.
有没有办法让变量在音频标签内工作?
提前致谢.
好的,感谢 theJoeBiz 的输入和一些思考,我通过制定指令解决了这个问题,代码如下:
app.directive('audios', function($sce) {返回 {限制:'A',范围:{代码:'='},替换:真的,模板:'<audio ng-src="{{url}}" 控件></audio>',链接:功能(范围){scope.$watch('code', function (newVal, oldVal) {如果 (newVal !== 未定义) {scope.url = $sce.trustAsResourceUrl("/data/media/" + newVal);}});}};});
然后在模板上我像这样使用它:
<div 音频代码="音频"></div>
现在一切正常.
I am trying to do the following:
<div ng-repeat="audio in event.audios">
<audio ng-src="/data/media/{{audio}}" controls></audio>
</div>
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?
Thanks in advance.
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.
这篇关于我可以使用 Angular 变量作为音频标签的来源吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!