使用AngularJS

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代码是：

<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>