angular ng-bind-html doesn't work with youtube embed

Question

I try to jsfiddel with the ng-bind-html. it doesn't seem to work with youtube embed, why?

<div ng-app="App1">
  <div ng-app="App1" ng-controller="Ctrl">
      <div ng-bind-html="youtube">
      </div>
       <p>this is a youtube {{youtube}}</p>
  </div>
</div>

script

var myApp = angular.module('App1', ['ngSanitize']);

myApp.controller('Ctrl', ['$scope', function($scope){
    $scope.youtube = '<iframe width="560" height="315" src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen></iframe>';

}]);

EDIT: Originally my example was simplified to just adding a link, thanks to IvorG I noticed that I didn't add 'ngSanitize' as a dependency, after adding the dependency I edited the question to reflect the original issue I was having: adding a youtube embed.

Kaustav Chakravorty · Answer 1 · 2014-06-18T06:56:39.950

14

ng-bind-html is working with youtube embed you just need to add $sce.trustAsHtml(value) on value that is fetching the <iframe> i have modified your code Check out the plunker ..for the solution

index.html

<div ng-app="App1">
  <div ng-app="App1" ng-controller="Ctrl">
    <H1>This is a youtube Embeded Video</h1>
      <div ng-bind-html="youtube"></div>
  </div>
</div>

script.js

var myApp = angular.module('App1', ['ngSanitize']);

myApp.controller('Ctrl', ['$scope','$sce', function($scope,$sce){
    $scope.youtube = $sce.trustAsHtml('<iframe width="560" height="315" src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen></iframe>');


}]);

edited Jun 18 '14 at 06:56

answered Jun 18 '14 at 06:47

Kaustav Chakravorty

260
2
13

This was the answer that helped me, because I had forgotten to inject $sce in the controller – Josh Burson Mar 10 '15 at 22:02
Welcome...Glad to help you – Kaustav Chakravorty May 14 '18 at 14:55

score 0 · Answer 2 · edited May 23 '17 at 12:32

As you are trying to add HTML into your JS, you should sanitize the code (Why you ask?). To do that in Angular, you need to require the sanitize module. Add this to your head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.js"></script>

And add this to your module:

var myApp = angular.module('spicyApp1', ['ngSanitize']);

Update And now I see that you also tried to add the link into the text (silly of me to oversee that). You can find the correct way to do in this article on Stackoverflow. A work around (but not advised) is to ng-bind-html a span element. See updated example on JSFiddle

score 0 · Answer 3 · edited Jun 22 '14 at 17:36

thanks to IvorG, I was able to assemble the following solution (jsfiddle):

<div ng-app="App1">
  <div ng-app="App1" ng-controller="Ctrl">
      <div ng-bind-html="youtube">
      </div>
       <p >this is a {{youtube}}</p>
      <p show-data='' youtube="{{youtube}}"></p>
    <button ng-click="showContent()">Show the Content</button>
    </div>
</div>

script

var myApp = angular.module('App1', ['ngSanitize']);

myApp.controller('Ctrl', ['$scope', function($scope){
    $scope.youtube = 'tmp content';
    $scope.showContent = function () {
        $scope.youtube = '<iframe width="560" height="315" src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen></iframe>';
    };
}]);

myApp.directive( 'showData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      var el;

      attrs.$observe( 'youtube', function ( tpl ) {

        if ( angular.isDefined( tpl ) ) {
          // compile the provided template against the current scope
          el = $compile( tpl )( scope );


          // stupid way of emptying the element
          element.html("");

          // add the template content
          element.append( el );
        }
      });
    }
  };
});

score 0 · Answer 4 · edited Mar 30 '17 at 10:44

js code:

var myApp = angular.module('App1', ['ngSanitize']);
myApp.filter('sanitizer', ['$sce', function($sce) {
        return function(url) {
            return $sce.trustAsHtml(url);
        };
}]);

myApp.controller('Ctrl', ['$scope', function($scope){
$scope.youtube = '<iframe width="560" height="315"    src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen> </iframe>';

}]);

html code:

<div ng-app="App1">
<div ng-app="App1" ng-controller="Ctrl">
<H1>This is a youtube Embeded Video</h1>
  <div ng-bind-html="youtube | sanitizer"></div>
</div>
</div>

This works for me.

angular ng-bind-html doesn't work with youtube embed

4 Answers4

Linked