I am currently developing an Angular app and encountering some difficulties with rendering a Soundcloud embed iframe in my HTML. The issue arises when I try to display the tracks stored in the array generated by my getTracks function. Despite successfully retrieving and storing all the necessary data in $scope, I am facing challenges when it comes to rendering the embedIframe property within the HTML.
When I simply add the embedIframe property to the object without using trustAsHtml, it displays as plain text. If I utilize ng-bind-html, it renders inside the html tag itself rather than within it. However, passing it through trustAsHtml results in nothing being displayed on the page. The embedIframe property seems to receive a function called 'TrustedValueHolderType' but does not store any data, or perhaps I am unsure of how to retrieve the data from it.
I would greatly appreciate any tips or suggestions that anyone could provide. Feel free to ask if you require additional information.
Here is a snippet of my HTML:
<section id="grid" ng-controller="GridCtrl">
<div class="track flipped" ng-repeat="track in soundcloud.tracks">
<div class="front">
<img src="images/loading.gif" />
</div>
<div class="back" ng-bind-html="{{track.embedIframe}}"></div>
</div>
</section>
This is a portion of my Controller:
.controller("GridCtrl", ['$scope', 'Soundcloud', function($scope, Soundcloud){
// Initialize the Soundcloud SDK configuration
Soundcloud.initialize();
// Store the tracks in the $scope
$scope.soundcloud = Soundcloud.getTracks();
// Debug
console.log( "GridCtrl", $scope.soundcloud);
}])
And here is part of my Service:
getTracks: function(){
var deferred = $q.defer();
var promise = deferred.promise;
promise.tracks = [];
SC.get("/me/tracks", function(response){
// Push Tracks
promise.tracks = response;
resolve(null, response, deferred);
}); //SC.get
promise.then(function(tracks){
$.each(tracks, function(k, v){
if(v.sharing == 'public'){
SC.oEmbed(v.uri, function(oembed){
promise.tracks[k].embedIframe = $sce.trustAsHtml( oembed.html );
resolve(null, oembed, deferred);
});
}
});
});
return promise;
}