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

回答

相關問題