用AngularJS注入iframe中的链接

Question

我正在网站的一个部分工作，在那里我显示歌曲的名称、播放列表和mixcloud小部件(Iframe)。我可以成功地从JSON中注入标题和播放列表，但是当我注入iframe代码的src时，播放机就不会出现。

这是我的JSON数据：

$scope.tracks =[
    {title:'Group Therapy 150 with Above & Beyond and Maor Levi', date: new Date(), link:"https://www.mixcloud.com/widget/iframe/?embed_type=widget_standard&embed_uuid=a38e8d96-7372-430b-91b3-7549a408ac7c&feed=https%3A%2F%2Fwww.mixcloud.com%2FPlayLifePodcast%2Fdj-nyk-play-life-podcast-003%2F&hide_cover=1&hide_tracklist=1&replace=0"}
];

这里是我注入代码的地方：

<div id="wrapper">
    <h1>{{track.title}}</h1>
    <iframe width="100%" height="180" ng-src="{{track.link}}" frameborder="0">    </iframe>
</div>

我在我的网站上使用了类似的静态iframe：www.playlifeproject.com和播放器正常出现。

我的网站上的工作代码是：

<iframe width="100%" height="180" src="https://www.mixcloud.com/widget/iframe/?embed_type=widget_standard&amp;embed_uuid=a38e8d96-7372-430b-91b3-7549a408ac7c&amp;feed=https%3A%2F%2Fwww.mixcloud.com%2FPlayLifePodcast%2Fdj-nyk-play-life-podcast-003%2F&amp;hide_cover=1&amp;hide_tracklist=1&amp;replace=0" frameborder="0"></iframe>

谢谢您的时间，任何帮助都是非常感谢的。

Answer 1

我创建了一个过滤器来解决这个问题：

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

然后在ng-src属性中使用它：

<iframe width="100%" height="180" ng-src="{{track.link | trustAsResourceUrl}}" frameborder="0"></iframe>