Angularjs 角度ng绑定html不'；我不能和youtube一起工作

我尝试使用ng绑定html。 它似乎不适用于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>

这是一个youtube{{youtube}

剧本

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

}]);

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

var myApp=angular.module（'App1'，['ngSanitize']）；
myApp.controller（'Ctrl'，['$scope'，函数（$scope）{
$scope.youtube=''；
}]);

---

编辑：最初，我的示例简化为只添加一个链接，多亏了Ivog，我注意到我没有添加“ngSanitize”作为依赖项，在添加依赖项后，我编辑了这个问题，以反映我遇到的原始问题：添加youtube嵌入。

当您试图将HTML添加到JS中时，您应该清理代码（）。要在Angular中执行此操作，需要使用sanitize模块。把这个加到你的头上：

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

更新

---

现在我看到你也试图把链接添加到文本中（我真傻，竟然监督了这一点）。你可以找到正确的方法来做。解决方法（但不建议）是将html绑定到span元素。请参见更新的示例

多亏了Ivog，我才能够组装以下解决方案（）：

这是一个{{youtube}


显示内容

剧本

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

}]);

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

var myApp=angular.module（'App1'，['ngSanitize']）；
myApp.controller（'Ctrl'，['$scope'，函数（$scope）{
$scope.youtube='tmp content'；
$scope.showContent=函数（）{
$scope.youtube=''；
};
}]);
指令（'showData'，函数（$compile）{
返回{
范围：正确，
链接：函数（范围、元素、属性）{
var-el；
属性$observe（'youtube'，函数（tpl）{
如果（角度定义（tpl））{
//根据当前范围编译提供的模板
el=$compile（第三方物流）（范围）；
//清空元素的愚蠢方式
html（“”）；
//添加模板内容
元素。追加（el）；
}
});
}
};
});

ng bind html正在与youtube embed一起使用 您只需在获取

的值上添加

$sce.trustAsHtml（value）

，我已经修改了您的代码，请查看..以获取解决方案

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>

这是一个嵌入youtube的视频

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


}]);

var myApp=angular.module（'App1'，['ngSanitize']）；
myApp.controller（'Ctrl'，['$scope'，'$sce'，函数（$scope，$sce）{
$scope.youtube=$sce.trustAsHtml（“”）；
}]);

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

}]);

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

var myApp=angular.module（'App1'，['ngSanitize']）；
myApp.filter（'消毒剂'，['$sce'，函数（$sce）{
返回函数（url）{
返回$sce.trustAsHtml（url）；
};
}]);
myApp.controller（'Ctrl'，['$scope'，函数（$scope）{
$scope.youtube=''；
}]);

html代码：

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

}]);

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

这是一个嵌入youtube的视频

---

这对我很有用。

这是帮助我的答案，因为我忘了在控制器中注入$sce。很高兴帮助你