Question

我正在开发一个有角度的应用程序，并且在我的html中渲染一个soundcloud emebed iframe时遇到了一些麻烦。正如您从下面的代码中看到的那样，我正在打印出我的getTracks函数中构建的数组中的所有轨道。所有数据都被调用并正确存储在$ scope中，我可以在控制台中看到我的控制台调试。当我将embedIframe属性添加到对象时，没有trustAsHtml它会呈现为文本，如果我使用ng-bind-html它会在html标记中呈现它本身，而不是它内部。当我通过trustAsHtml传递它时，我只是在html中得不到任何回报。 embedIframe prop获取一个名为的函数 'TrustedValueHolderType'但它似乎没有存储任何东西..或者我不知道如何从中获取数据。

任何人都可以给我的任何提示都会很棒！如果您需要更多信息，请询问。

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

我的控制器

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

    }])

我的服务

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

Answer 1

My Angular并不是很棒，但有点像：

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

应该是：

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

即。 soundcloud是列表，而不是列表。

Answer 2

iFrames源需要angular $ sce.RESOURCE_URL

Answer 3

当然，你现在已经想到了这一点，但我自己解决了这个问题。您需要使用$sce服务告诉angular将“受信任的”html内容呈现到您的视图中。

您可以通过创建过滤器来完成此操作：

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

然后将此过滤器与您的嵌入代码一起传递：

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

Angularjs从服务中呈现iframe

3 个答案: