角度 ng-bind-html 不适用于 youtube 嵌入答案

【问题标题】：angular ng-bind-html doesn't work with youtube embed角度 ng-bind-html 不适用于 youtube 嵌入
【发布时间】：2014-02-02 13:02:54
【问题描述】：

我尝试使用 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”作为依赖项，在添加依赖项后我编辑了问题以反映我遇到的原始问题: 添加 youtube 嵌入。

【问题讨论】：

标签： angularjs

【解决方案1】：

ng-bind-html 正在使用 youtube 嵌入您只需要在获取<iframe> 的值上添加$sce.trustAsHtml(value) 我已经修改了您的代码查看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>');


}]);

【讨论】：

这是对我有帮助的答案，因为我忘记在控制器中注入 $sce
欢迎...很高兴为您提供帮助

【解决方案2】：

当您尝试将 HTML 添加到您的 JS 中时，您应该清理代码 (Why you ask?)。要在 Angular 中做到这一点，你需要 sanitize 模块。将此添加到您的脑海中：

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

更新现在我看到您还尝试将链接添加到文本中（我很傻，无法监督）。您可以在this article on Stackoverflow 中找到正确的方法。一种解决方法（但不建议）是 ng-bind-html 一个 span 元素。查看JSFiddle上的更新示例

【讨论】：

【解决方案3】：

感谢 IvorG，我能够组装以下解决方案 (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>

脚本

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

【讨论】：

【解决方案4】：

js代码：

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代码：

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

这对我有用。

【讨论】：