使用ng-bind-html从Angular Array中生成Iframe视频

Iframe video from Angular Array using ng-bind-html

本文关键字：Iframe 视频 Array ng-bind-html Angular 使用      更新时间：2023-09-26

我在使用ng-bind-html获得iframe工作时遇到了一些麻烦。我把所有数据都放在一个数组里。我主要使用ng-bind-html将所有内容保存在一个地方。我似乎不能让它与框架的工作，虽然。

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

你可以看到它并没有做任何事情

您需要使用$sce:

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

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

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

演示
.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>
相关文章：