Question

我正在尝试显示我可以从我的阵列中取出的特定ID的YouTube视频。我使用表达式在我的ng-src属性中的正确位置填写此ID，但它不起作用。我在i-frame上面使用相同的表达式来查看表达式是否正常工作，并且确实如此。

<iframe allowfullscreen="" 
        frameborder="0" 
        height="315" 
        ng-src="http://www.youtube.com/embed/{{selectedSong.youtube_ids.default}}?rel=0?rel=0&amp;hd=1" 
        width="560">
</iframe>

如你所见，我使用{{selectedSong.youtube_ids.default}}表达式作为我的id，但是当我在运行时检查我的html时显示表达式而不是结果（所以我确定它不起作用）。

Answer 1

据我所知，由于安全问题导致xss攻击无法正常工作。但您可以创建一个过滤器来信任该URL：

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

然后将其称为src

中网址的过滤器

<iframe ng-src="{{ anUrlFromYourController | trustThisUrl}}"></iframe>

Answer 2

我找到了一个更好的解决方案，解决了错误：

Alternative to iFrames with HTML5

Answer 3

控制器中的

：插入参数：$sce

function($sce, ...)

$scope.linkYoutube = $sce.trustAsResourceUrl('http://www.youtube.com/embed/'+data['yourLink']);

然后在html中，您可以使用`ng-src =“linkYoutube”

iframe中的ng-src属性不接受表达式？使用Angular.js

3 个答案: