我可以使用Angular变量作为音频标签的来源吗？

Question

我正在尝试执行以下操作:

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

但是当我加载视图时,{{audio}}变量不会被解析,而是按原样硬编码到源中.但是,例如,如果我将相同的变量放在音频标签之外,它会正确呈现音频文件的名称.我尝试过使用src和ng-src都无济于事.

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

提前致谢.

Answer 1

我不是所有那熟悉使用它的图像之外ngSrc指令,但它可能在某处源需要一个img标签.

试试这个:

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

ng-attr-指令可用于角度不具有特定角色的任何属性.您可以在此页面上阅读更多相关信息.

更新,我错了.

我创建了一个jsfiddle,发现了正在发生的实际错误.

您从sce服务中收到错误.在这里查看SO问题.

解决方案是使用$sce.trustAsResourceUrl().

例:

angular.module('AudioTest', [])
.controller('AudioTestCtrl', function($scope, $sce) {
    $scope.event = { 'audios': [
        $sce.trustAsResourceUrl('/data/media/test1'),
        $sce.trustAsResourceUrl('/data/media/test2')
    ]};
});

这是小提琴.

更新#2

如果您不希望将URL设置为硬编码或在从服务器获得响应后循环,则可以使用自定义过滤器来完成您要查找的内容.此方法不使用插值,这是抛出错误的位置.

JS:

angular.module('AudioTest', [])
.filter('trustedAudioUrl', function($sce) {
    return function(path, audioFile) {
        return $sce.trustAsResourceUrl(path + audioFile);
    };
})
.controller('AudioTestCtrl', function($scope) {
    $scope.event = { 'audios': ['test1', 'test2']};
});

HTML:

<div ng-app="AudioTest">
    <div ng-controller="AudioTestCtrl">
        <div ng-repeat="audio in event.audios">
            <audio ng-src="/data/media/ | trustedAudioUrl:audio)" controls></audio>
        </div>
    </div>
</div>

而新的小提琴.

Answer 2

好的,感谢theJoeBiz的输入和一些思考我通过制定指令解决了这个问题,这里是代码:

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

然后在模板上我使用它如下:

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

现在一切正常.