1

I'm working on a section of a website where I'm displaying the name, playlist and mixcloud widget(iframe) of the song. I can inject the title and playlist successfully form JSON but when I inject the src of the iframe code, the player doesn't show up.

this is my JSON Data:

$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"}
];

this is the place where I'm injecting the code:

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

I'm using the similar static iframe on my website here: www.playlifeproject.com and the player shows up normally.

the working iframe code on my website is this:

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

Thank you for your time, any help is appreciated.

ANshul Sharma
  • 285
  • 4
  • 22
  • 1
    this [answer](http://stackoverflow.com/questions/20045150/angular-js-how-to-set-an-iframe-src-attribute-from-a-variable?answertab=votes#tab-top) may help you – Khalid Dec 08 '15 at 16:54
  • 1
    Thank you @Khalid after looking at this answer I created a filter to use it along with the links – ANshul Sharma Dec 08 '15 at 17:21

1 Answers1

1

I created a filter to resolve the issue:

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

and then used it in the ng-src attribute:

<iframe width="100%" height="180" ng-src="{{track.link | trustAsResourceUrl}}" frameborder="0"></iframe>
ANshul Sharma
  • 285
  • 4
  • 22