Angularjs渲染服务的iframe

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

任何人可以给我的提示将是伟大的！如果你需要更多的信息，只需要问。

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

来源

2014-02-23 Shan Robertson

我的角度不是很大，但它看起来像：

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

应该是：

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

即是的SoundCloud列表，而不是具有列表。

来源

2014-09-03 23:22:23 David

的iFrame源需要的角度$ sce.RESOURCE_URL

来源

2014-11-15 17:18:54 user3909593

当然你想通了这一点，现在，只是解决了这个自己。您需要使用$sce服务来告诉角度以将'可信赖的'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>

来源

2015-10-06 14:53:48 ykwx

Angularjs渲染服务的iframe

回答

相关问题