Geek asks and answers

Angularjs pulls iframe from service

I am working on an angular application and am having problems displaying soundcloud emebed iframe in my html. As you can see from my code below, I print out all the tracks in the array that are built into my getTracks function. All data is called and saved correctly in $ scope, and I see that the controller is being debugged in my console. When I add the embedIframe property to the object, without trustAsHtml it is displayed as text, if I use ng-bind-html, it displays it in the html tag, and not inside it. When I pass it through trustAsHtml, I just don't get anything in html. the embedIframe built-in function gets a function called "TrustedValueHolderType", but doesn’t seem to store anything .. or I don’t know how to get data from this.

Any advice you could give me would be great! And if you need more information, just ask.

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>

My controller

.controller("GridCtrl", ['$scope', 'Soundcloud', function($scope, Soundcloud){

        // Init the Soundcloud SDK config
        Soundcloud.initialize();

        // Store tracks in the $scope
        $scope.soundcloud = Soundcloud.getTracks();

        //Debug
        console.log( "GridCtrl", $scope.soundcloud);

    }])

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;
        }
+3
source share
3 answers

My Angular is small, but it looks like:

<div class="track flipped" ng-repeat="track in soundcloud.tracks">

it should be:

<div class="track flipped" ng-repeat="track in soundcloud">

i.e. soundcloud is a list, not a list.

0
source

Source Requirements iFrames angular $ sce.RESOURCE_URL

0
source

Of course, you already understood it, but just decided it yourself. You need to use the $ sce service to tell angular to render the "trusted" html content in your view.

You can do this by creating a filter:

// Trust as embed
.filter('trustEmbed', function ($sce) {
    return function (value) {
        return $sce.trustAsHtml(value);
    };
})

Then pass this filter along with your insert code:

<div ng-app="app" ng-controller="mainCtrl">
    <div ng-bind-html="embed_code | trustEmbed"></div>
</div>
0
source

More articles:


All Articles