AngularJS and IFrame srcdoc

Question

I parsed a bunch of emails from the server, and now I would like to display them on a web page. I got their HTML content and I thought that IFrames were the easiest way to display emails as they should have been displayed.

but

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

Gives me the following AngularJS error:

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

I was looking for a way to do this, tried to disable $ sce as a test, but that didn't work either. This is just a test project, and the data I receive is safe, I just need this for POC.

I did it now in the controller:

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

This works, but do I still prefer to do this with data binding, if there is a solution? Thanks.

Answer 1

Add a filter to make a trusted value:

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

And then apply the filter:

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

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

Answer 2

try adding ngSanitize as a dependency in your application.

here you have more information: http://docs.angularjs.org/api/ngSanitize