Angular在渲染视频和音频的url地址时报错

Question

项目是一种答题小游戏，题目里面有文字、图片、视频和音频4种格式，我用的angular框架，但是在渲染视频和音频时老是报错，用了$sce还是不能解决，求助大神。
下面是html部分的代码

<div class="other">
    <img  ng-src="{{store.sub[index].attachment}}" class="image"/>
    <video width='100%' height="auto" class="video" controls="controls">
        <source ng-src="{{store.sub[index].attachment}}">
    </video>
    <audio class="audio" controls="controls">
        <source ng-src="{{store.sub[index].attachment}}">
    </audio>
</div>

js里面

.controller("timer",function($scope,$state,$sce){
        var str=$scope.store.sub[index].attachment;
        $scope.store.sub[index].attachment=$sce.trustAsResourceUrl(str);
    })
    

Answer 1

.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])

<div class="other">
        <img  ng-src="{{store.sub[index].attachment|trustAsResourceUrl}}" class="image"/>
        <video width='100%' height="auto" class="video" controls="controls">
            <source ng-src="{{store.sub[index].attachment|trustAsResourceUrl}}">
        </video>
        <audio class="audio" controls="controls">
            <source ng-src="{{store.sub[index].attachment|trustAsResourceUrl}}">
        </audio>
    </div>

Answer 2

参考$sce的使用

.controller("timer",function($scope,$state,$sce){
    var str=$scope.store.sub[index].attachment;
    
    // $scope.store.sub[index].attachment已经存在了，所以ng-src已经赋值了，并没有经过$sce的处理，所以会报错。
    
    // 下面的处理没有意义。所以$scope.store.sub[index].attachment的赋值一开始就应该是经过$sce处理后的返回值。
    
    $scope.store.sub[index].attachment=$sce.trustAsResourceUrl(str);
    })

Answer 3