Javascript Angularjs从服务渲染iframe

我正在开发angular应用程序，在html中呈现soundcloud emebed iframe时遇到一些问题。正如您从下面的代码中看到的，我正在打印在getTracks函数中构建的阵列中的所有曲目。所有数据都被调用并正确地存储在$scope中，我可以在控制器的控制台调试中看到这一点。当我向对象添加Embeddeiframe属性时，如果不使用trustAsHtml，它将作为文本呈现，如果我使用ng bind html，它将在html标记中呈现，而不是在它的内部。当我通过trustAsHtml传递它时，我在html中什么也没有得到。Embeddeiframe属性获取一个名为 “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>

我的服务

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

---

我的角度不是很好，但看起来有点像：

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

应该是：

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

---

i、 e.soundcloud是列表，而不是拥有列表。

iFrames source需要$sce。RESOURCE\u URL

当然你现在已经解决了这个问题，但我自己解决了。您需要使用该服务告诉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>

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