AngularJS和IFrame srcdoc

Question

我从服务器解析了一堆电子邮件,现在我想在网页上显示它们.我得到了他们的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();

这有效,但如果有解决方案,我仍然更喜欢通过数据绑定来做到这一点？谢谢.

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>

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

Answer 2

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

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