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

Question

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

<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

据我所知，这是行不通的，因为安全问题会影响 previne xss 攻击。但是您可以创建一个过滤器来信任 url，例如：

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

然后调用它作为 src

中 url 的过滤器

<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

ng-src attribute in an iframe doesn't accept expressions ? using Angular.js

javascript

angularjs

iframe