AngularJS and IFrame srcdoc

angularjs, iframe, javascript

Solution

Add a filter to make a value trusted:

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>

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

Problem

I parsed a bunch of email messages from a server, and I would now like to display them on a webpage. I got their HTML contents and I figured an IFrame was the easiest way to show the emails as they were meant to be shown. However, ``` <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 have been searching for a way to do this, tried disabling $sce as a test, but that didn't work either. It's just a test project and the data I'm getting is safe, I just need it for a POC. I did this now in my controller: ``` var iframeDocument = document.querySelector('#myiframe').contentWindow.document; var content = $scope.email.html; iframeDocument.open('text/html', 'replace'); iframeDocument.write(content); iframeDocument.close(); ``` That works, but I'd still prefer to do it through data-binding, if there's a solution? Thanks.

Original source