使用AngularJS在iframe中注入链接答案

【问题标题】：Injecting link in iframe with AngularJS使用AngularJS在iframe中注入链接
【发布时间】：2015-12-08 16:50:56
【问题描述】：

我正在网站的一个部分工作，其中显示歌曲的名称、播放列表和 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&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"}
];

这是我注入代码的地方：

<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 可以帮助你
谢谢@Khalid 在查看了这个答案后我创建了一个过滤器以将其与链接一起使用

标签： javascript angularjs json iframe

【解决方案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>

【讨论】：