angularjs - Angular ng-bind-html不适用于youtube嵌入

Question

我尝试使用ng-bind-html来jsfiddel。
似乎无法与youtube embed一起使用，为什么？

<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>

脚本

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>';

}]);

编辑:最初，我的示例简化为仅添加链接，这要感谢IvorG，我注意到我没有添加'ngSanitize'作为依赖项，在添加依赖项之后，我编辑了问题以反射(reflect)我原来遇到的问题:添加一个youtube嵌入。

Answer 1

ng-bind-html正在使用youtube embed
您只需要在获取$sce.trustAsHtml(value)的值上添加<iframe>，我已经修改了您的代码，请查看plunker ..以获取解决方案

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>');


}]);