將iframe插入角度應用程序

我有一個應用程序與視頻列表，我不想一次加載所有的視頻，只是當用戶選擇一個視頻，然後選擇播放（是的，這是一個兩步過程）。將iframe插入角度應用程序

所以當用戶選擇一個視頻時，我試圖將只有該視頻的iframe播放器嵌入到所選元素中。

在我的控制，我有

$scope.selectedVideo = function(index){ 
     if($scope.activeVideo===index)return; // preventing bubbling from closeSelected (I hope) 
     if($scope.activeVideo !== null){ 
      $scope.closeSelected(); 
     } 
     var video = $scope.videos[index]; 
     video.embed = '<span><iframe src="https://www.youtube.com/embed'+video.id+'"></iframe> does something show?</span>'; 
     video.active = true; 
     $scope.activeVideo=index; 
    }

和我的html，我有

<div ng-bind-html="video.embed"></div>

我試過的所有ng-bind-html-unsafe方式（我認爲這是不建議使用），但沒有什麼是實際上將iframe放入頁面中。

我正在使用角度版本1.2.15，並且我已將ngSanitize包含在控制器中。

來源

2014-04-01 pedalpete

我認爲你會發生這種錯誤。這就是說，如果你真的想輸出HTML，就像你想要的那樣，ng-bind-html-unsafe已經被棄用了，就像你說的那樣。這樣做的新方法是注入$ SCE和使用trustAsHtml

http://docs.angularjs.org/api/ng/service/$sce

可以使這樣的過濾器：

app.filter('unsafe', ['$sce', 
    function($sce) { 
     return function(val) { 
      return $sce.trustAsHtml(val); 
     }; 
    } 
]);

然後在你的HTML做到這一點：

<div ng-bind-html="video.embed | unsafe"></div>

不確定video是否真的是範圍的一部分？但是，這聽起來像是你做錯了。你有嘗試過使用ng-view嗎？這樣你可以交換該視圖的內容（內容是一個iframe）。

http://docs.angularjs.org/api/ngRoute/directive/ngView

希望它能幫助！

來源

2014-04-01 08:06:37

這樣做的竅門，但我很好奇，爲什麼你，我正在以正確的方式去做。如果我將50個視頻加載到頁面上，我不希望每個視頻嵌入到頁面中，因爲即使iframe被隱藏，iframe也會下載頁面。 – pedalpete

該視圖有點像動態內容的佔位符，但擁有自己的生活 - 視圖可以是iframe，其屬性（如src）可以通過控制器和範圍進行綁定。你可以使用ngView來完成SPA（單頁面應用程序），就像服務器端的主頁面或剃刀布局頁面一樣（microsoft termonology，抱歉） –

將iframe插入角度應用程序

回答

相關問題