基于ng-bind的角阵列视频

Question

我在使用ng-bind获得一个iframe时遇到了一些困难。我的所有数据都在一个数组中。我主要是用ng-bind把它保存在一个地方。不过，我似乎不能让它和iframe一起工作。

这是我想做的事情的一个例子。x柱塞

正如你所看到的，它并没有真正做任何事情。

Answer 1

您需要使用$sce

$sce (“严格上下文转义”)是一个内置的角形服务，可以自动清除模板中的内容和内部源。

将外部源和原始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>