CODEWITHSUNDEEP
javascriptangularjshtmliframe
Josh
Josh

Reputation: 53

Iframe video from Angular Array using ng-bind-html

I'm having some trouble getting an iframe to work through using ng-bind-html. I have all my data inside an array. I've been mainly using ng-bind-html to keep it all in one place. I can't seem to get it to work with iframe's though.

Here is an example of what I'm trying to do. xPlunker

As you can see it isn't really doing anything.

Upvotes: 1

Views: 1154

Answers (1)

Shaya
Shaya

Reputation: 2932

You need to use $sce:

$sce ("Strict Contextual Escaping") is a built-in angular service that automatically sanitize content and internal sources in templates.

injecting external sources and raw HTML into the template requires manual wrapping of$sce.

In this example we'll create a simple $sce sanitation filter:.

Demo

.filter('sanitizer', ['$sce', [function($sce) {
     return function(content) {
          return $sce.trustAsResourceUrl(content);
      };
}]);

Usage in template

<div ng-repeat="item in items">
    
    <!-- Sanitize external sources -->
    <iframe ng-src="{{item.youtube_url | sanitizer}}">
    
    <!-- Sanitaize and render HTML -->
    <div ng-bind-html="{{item.raw_html_content| sanitizer}}"></div>

</div>

Upvotes: 3

Related Questions