insert an iframe into page dynamically in AngularJS insert an iframe into page dynamically in AngularJS angularjs angularjs

insert an iframe into page dynamically in AngularJS


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! :)


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:


After much trouble I managed to get a nice setup going where I can dynamically load iframes into my page and pass information through to it.

I made this a github project. It uses a single directive for passing raw input element information, and also uses ngSanatize for the $sce.trustAsResourceUrl function.

Here is the live demo