使用 ng-bind-html 来自 Angular Array 的 iframe 视频答案

【问题标题】：Iframe video from Angular Array using ng-bind-html使用 ng-bind-html 来自 Angular Array 的 iframe 视频
【发布时间】：2016-01-20 20:08:48
【问题描述】：

我在使用 ng-bind-html 让 iframe 工作时遇到了一些麻烦。我的所有数据都在一个数组中。我一直主要使用 ng-bind-html 将其全部保存在一个地方。不过，我似乎无法让它与 iframe 一起使用。

这是我正在尝试做的一个示例。 xPlunker

如您所见，它实际上并没有做任何事情。

【问题讨论】：

请在问题中包含代码的相关部分，并具体询问您期望发生什么以及什么不起作用。
你试过我的解决方案了吗？

标签： javascript angularjs html iframe

【解决方案1】：

你需要使用$sce:

$sce ("Strict Contextual Escaping") 是一个内置的 Angular 服务，可自动清理模板中的内容和内部资源。

将外部源和原始HTML注入模板需要手动包装$sce。

在本例中，我们将创建一个简单的 $sce 卫生过滤器：。

Demo

.filter('sanitizer', ['$sce', [function($sce) {
     return function(content) {
          return $sce.trustAsResourceUrl(content);
      };
}]);

在模板中的使用

<div ng-repeat="item in items">
    
    <!-- Sanitize external sources -->
    <iframe ng-src="{{item.youtube_url | sanitizer}}">
    
    <!-- Sanitaize and render HTML -->
    <div ng-bind-html="{{item.raw_html_content| sanitizer}}"></div>

</div>

【讨论】：

这似乎给了我一个错误 Error: [$interpolate:interr].
这很棒！谢谢你。只是一个旁注，您必须使用 /embed/ 否则您将收到拒绝显示的错误，因为它将“X-Frame-Options”设置为“SAMEORIGIN”。我希望在没有 $sce 的情况下以某种方式找到解决方案，但我想仅通过 html 绑定进行翻译是没有办法的。