在ng-bind-html

Question

我有一个数据源，用于在页面上呈现博客文章。其中一个条目包含IFRAME。我看到IFRAME在数据源中被返回，但它永远不会被渲染到ng-bind-html中的页面。

这是我的代码：

<div class="blog-post-content" ng-bind-html="entry.content" itemprop="text">
</div>

如果我将其切换为以下内容，我会看到IFRAME标记已呈现出来，但当然现在它是RAW HTML。

<div class="blog-post-content" itemprop="text">
    {{entry.content}}
</div>

如何将此IFRAME呈现给页面。

Answer 1

此处最好的方法是将您的数据源重构为仅包含网址，而不是完整的iframe标记，并使用<iframe ng-src="entry.content"></iframe>。

ng-bind-html不适合您，因为消毒剂可以保护您免受潜在的XSS攻击。

如果您不控制数据源，但完全信任它，您可以查看使用例如您的指令中为scope.trustedContent = $sce.trustAsHtml(entry.content);，DOM中为<div ng-bind-html="trustedContent"></div>。

（不控制它，但完全信任它当然是一个矛盾，所以你可能最好解析你的指令中的数据源来提取url，而不是信任整个字符串。）