在源标签中，ng-source不适用于动态视频？

Question

我想在缩略图中显示来自角度控制器的视频（动态地从服务器端），但是ng-source无法获取url路径，但是当我提供直接url路径时它将正常工作。

这是我的控制器代码。

 $scope.items = {
        "media": [{
            "type": "img",
            "big": "http://lorempixel.com/400/200/food/"
        }, {
            "type": "video",
            "thumb": "https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761",
        }]
    };


 });

和Html代码

<div id="slider" class="container" ng-style="vm.navPosStyle" ng-repeat="image in items.media">
                   <img ng-src="{{image.big}}"  class="galleryItem" 
                        click="vm.setImage( image.big )"/>
                    <video class="galleryItem" ng-if="image.type === 'video'" width="320" height="240">
                        <source ng-src="{{image.thumb}}" type="video/mp4" ng-click="vm.setImage( image.thumb )">
                    </video> 
                </div>

问题是

<video class="galleryItem" ng-if="image.type === 'video'" width="320" height="240">
                        <source ng-src="{{image.thumb}}" type="video/mp4" ng-click="vm.setImage( image.thumb )">
                    </video> 

源标记无效

Answer 1

AngularJS阻止您的资源被认为是不受信任的来源。

根据Angular，

  

默认情况下，只有属于同一来源的网址才受信任。这些是具有与应用程序文档相同的域，协议和端口的URL。

克服此问题相对简单，您需要使用$sce告诉您的Angular应用程序源确实是受信任的。

让我们创建一个可以做到这一点的过滤器：

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

在HTML内部，您只需使用

即可

ng-src="{{image.thumb | trustResource}}"