Josh Josh - 11 months ago 90
AngularJS Question

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.


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

Answer Source

$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 :`.


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

Usage in template

<div ng-repeat="item in items">

    // Sanitize external sources
    <ifrmae ng-src="{{item.youtube_url | sanitizer}}">

    // Sanitaize and render HTML 
    <div ng-bind-html="{{item.raw_html_content| sanitizer}}"></div>