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

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


}]);

Answer 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

上的更新示例

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

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

这适合我。

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

4 个答案: