将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插入角度应用程序

回答

相关问题