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.