AngularJS and IFrame srcdoc

Question

我从服务器解析了一堆电子邮件，并希望在网页上显示它们。我获取了它们的HTML内容，考虑使用IFrame最容易展示电子邮件原本的外观。

然而，

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

以下是关于AngularJS的错误信息：

“给出了以下 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();

这种方式可行，但如果有数据绑定的解决方案，我仍然更喜欢使用数据绑定。谢谢。

- Joris Ooms

---

@dandavis 包含实际电子邮件内容的HTML文档 - Joris Ooms

尝试先将文档转换为字符串，最终将srcDoc设置为HTML字符串。 - dandavis

@dandavis，您能详细说明一下吗？电子邮件内容是一个大的HTML字符串。我只想将整个电子邮件转储到IFrame中，但Angular不允许我这样做。我尝试了类似于这样的代码：$('#myiframe').attr('srcdoc', $scope.email.html); 但这并没有真正奏效。 - Joris Ooms

我不是100%确定，但我认为Angular目前不支持这个。我相信你需要做 $scope.emailHtml = $sce.trustAsHtml($scope.email.html)，但是没有 ng-srcdoc-bind-html，我认为这是这个难题的另一部分（请查看 ng-bind-html）。 - Matt Greer

另一个可能性是禁用SCE，请参见：http://docs.angularjs.org/api/ng.$sce#example_can-i-disable-sce-completely - Matt Greer

Answer 1

添加过滤器以使值得到验证：

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

然后应用过滤器：

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

Complete code: http://jsfiddle.net/2bvktbLr/1/

- user219644

Answer 2

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

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

- MCSI

---

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