使用AngularJS在iframe中注入鏈接

我正在製作一段網站，其中顯示歌曲的名稱，播放列表和mixcloud小部件（iframe）。我可以成功地從JSON注入標題和播放列表，但是當我注入iframe代碼的src時，播放器不顯示。使用AngularJS在iframe中注入鏈接

這是我的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>

謝謝您的時間，任何幫助表示讚賞。

來源

2015-12-08 ANshul Sharma

這個【答案】（http://stackoverflow.com/ questions/20045150/angular-js-how-to-set-an-iframe-src-attribute-from-a-variable？answertab = votes＃tab-top）可以幫助你 – Khalid

謝謝@Khalid看完這個答案之後I創建了一個過濾器，將其與鏈接一起使用 –

我創建了一個過濾器來解決這個問題：

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

來源

2015-12-08 17:20:41

使用AngularJS在iframe中注入鏈接

回答

相關問題