insert an iframe into page dynamically in AngularJS

Question

I am trying to dynamically insert an iframe into a page with Angular 1.2. Here is the code:

html:

<div id="player_wrapper" ng-cloak>     <div ng-bind-html="player"></div> </div> 

js:

$http({method: 'GET', url: url}).     success(function(data, status) {         $scope.player = data.html;     }....... 

So the data.html is a string that has a valid HTML starting with

<iframe ...> 

The string contains also some div. So it could look like:

<iframe src='...' ...></iframe><div>some stuf</div> 

I use in app.js 'ngSanitize'. What it shows is the div (after the iframe) but not the iframe itself.

If I use jQuery, basically a

$(#'player_wrapper').html(data.html) 

works fine... but trying to make it proper angularJS.

Any idea on why only the divs after the iframe are being displayed?

Many thanks all

Answer 1

ngBindHtml will pass your HTML through $sce.getTrustedHtml before displaying it. I suspect this is what would be removing your iframe.

According to the docs you can use $sce.trustAsHtml to avoid this check so long as you fully trust any HTML coming from this source - an iframe from an untrusted source could likely do a number on nasty things to visitors to your page.

$http({method: 'GET', url: url}).     success(function(data, status) {         $scope.player = $sce.trustAsHtml(data.html);     }....... 

Be careful! :)

Answer 2

You need to use the $sce service as desribed in the documentation of ng-bind-html:

$scope.player = $sce.trustAsHtml('your html goes here'); 

See this plunk for an example: