AngularJS 和 IFrame srcdoc答案

【问题标题】：AngularJS and IFrame srcdocAngularJS 和 IFrame srcdoc
【发布时间】：2014-01-09 02:04:39
【问题描述】：

我从服务器解析了一堆电子邮件，现在我想将它们显示在网页上。我得到了他们的 HTML 内容，我认为 IFrame 是显示电子邮件的最简单方法。

然而，

<iframe srcdoc="{{ email.html }}" frameborder="0"></iframe>

给我以下 AngularJS 错误：

Error: [$interpolate:interr] Can't interpolate: {{ email.html }}
Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

我一直在寻找一种方法来做到这一点，尝试禁用 $sce 作为测试，但这也不起作用。这只是一个测试项目，我得到的数据是安全的，我只需要它来进行 POC。

我现在在我的控制器中这样做了：

var iframeDocument = document.querySelector('#myiframe').contentWindow.document;
var content = $scope.email.html;
iframeDocument.open('text/html', 'replace');
iframeDocument.write(content);
iframeDocument.close();

这行得通，但如果有解决方案，我还是更喜欢通过数据绑定来实现？谢谢。

【问题讨论】：

@dandavis 包含实际电子邮件内容的 HTML 文档
尝试先将doc转成字符串，最终将srcDoc设置为html字符串。
@dandavis 你能详细说明一下吗？电子邮件内容是一个大的 HTML 字符串。我只想将整个电子邮件转储到 IFrame 中，但 Angular 不会让我这样做。我尝试过这样的事情：$('#myiframe').attr('srcdoc', $scope.email.html);，但这也没有真正奏效。
我不是 100% 确定，但我认为 Angular 目前不支持这一点。我相信你需要做$scope.emailHtml = $sce.trustAsHtml($scope.email.html)，但没有ng-srcdoc-bind-html，我认为这是这个难题的另一部分（结帐ng-bind-html）
另一种可能性是禁用 SCE，请参见：docs.angularjs.org/api/…

标签： javascript angularjs iframe

【解决方案1】：

添加过滤器以使值可信：

angular.module('app').filter('toTrusted', ['$sce', function($sce) {
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

然后应用过滤器：

<iframe srcdoc="{{email.html | toTrusted}}" frameborder="0"></iframe>

完整代码：http://jsfiddle.net/2bvktbLr/1/

【讨论】：

【解决方案2】：

尝试在您的应用中添加 ngSanitize 作为依赖项。

这里有更多信息：http://docs.angularjs.org/api/ngSanitize

【讨论】：

这对我有帮助。我已经从 index.html 中引用了 angular-sanitize.js，但我需要将其添加为依赖项：angular.module('app', ['ngSanitize']);