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

Question

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.

Denis C de Azevedo · Accepted Answer · 2014-10-03 06:53:14Z

2

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");
    }
  }
}]);

answered Oct 3, 2014 at 6:53

Denis C de Azevedo

6,3072 gold badges34 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergey Romanov · Accepted Answer · 2014-10-03 06:54:36Z

0

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>

answered Oct 3, 2014 at 6:54

Sergey Romanov

3,0905 gold badges26 silver badges39 bronze badges

Comments

javiercf · Accepted Answer · 2014-10-22 18:51:49Z

0

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;
    };
}]);

answered Oct 22, 2014 at 18:51

javiercf

8117 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related