angular ng-bind-html不适用于youtube embed

Question

我尝试使用ng-bind-html 来使用jsfiddel.它似乎与youtube嵌入无关,为什么？

<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'作为依赖项,添加依赖项后我编辑了问题以反映我遇到的原始问题:添加一个youtube嵌入.

Answer 1

ng-bind-html正在使用youtube嵌入你只需要添加$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>');


}]);

Answer 2

当您尝试将 HTML 添加到 JS 中时，您应该清理代码（为什么要问？）。要在 Angular 中执行此操作，您需要需要清理模块。将其添加到您的头上：

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

并将其添加到您的模块中：

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

更新 现在我看到您还尝试将链接添加到文本中（我愚蠢地监督这一点）。您可以在Stackoverflow 上的这篇文章中找到正确的方法。解决方法（但不建议）是 ng-bind-html 一个 span 元素。请参阅JSFiddle上更新的示例