CODEWITHSUNDEEP
javascripthtmlangularjsiframe
ChainFuse
ChainFuse

Reputation: 827

How to insert an iframe with angular.js using $sce?

I am trying to insert an entire iframe and output it to the html. The reason why it has to be an iframe is because I have a function that handles several video embeds like youtube, vine and more - and they all have different tags.

So what I'd like to do is the following:

Input:

var html = '<iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>';

$scope.video_element = $sce.trustAsHtml(html);

and on the controller:

<div ng-bind-html="video_element"></div>

I'd like the iframe to be outputted as a whole inside of the div. Many times, it just outputs a n '[object HTMLIFrameElement]' not the actual iframe. Can anyone guide me in the right direction please? A plunkr would be awesome.

Thanks.

Upvotes: 1

Views: 2553

Answers (3)

javiercf
javiercf

Reputation: 811

In my case this worked for me, a custom filter

app.filter('iframe', ['$sce', function($sce) {
return function(input) {
        input = $sce.trustAsResourceUrl(input);
        return input;
    };
}]);

Upvotes: 0

Sergey Romanov
Sergey Romanov

Reputation: 3080

For that you will need a custom directive. 

app.directive('mySrc', ['$sce', function($sce) {
    return function(scope, element, attr) {
        scope.$watch($sce.trustAsUrl(attr.mySrc), function(value) {
            $(element).attr({src: attr.mySrc || ''});
        });
    };
}])

And then 

<iframe my-src="//www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Upvotes: 0

Denis C de Azevedo
Denis C de Azevedo

Reputation: 6298

I would suggest using a directive for this, that's what AngularJS recommends to attach special behaviors to DOM elements.

I created a Plunkr with the solution, check this: iframe from a directive.

Let me know if this solves your issue.

app.directive('iframeDirective', ['$sce', function($sce) {
return {
    restrict: 'E',
    template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>',
    link: function(scope) {
      scope.trustedUrl = $sce.trustAsResourceUrl("//www.youtube.com/embed/dQw4w9WgXcQ");
    }
  }
}]);

Upvotes: 2

Related Questions