javascript - 使用 ng-bind-html 来自 Angular Array 的 Iframe 视频

Question

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

这是我正在尝试做的一个例子。x Plunker

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

Answer 1

你需要使用$sce:

$sce ("Strict Contextual Escaping") is a built-in angular service that automatically sanitize content and internal sources in templates.

将外部源和原始 HTML 注入(inject)模板需要手动包装 $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>