javascript - 如何使用 $sce 插入带有 angular.js 的 iframe？

Question

我正在尝试插入整个 iframe 并将其输出到 html。它必须是 iframe 的原因是因为我有一个函数可以处理多个视频嵌入，例如 youtube、vine 等等——它们都有不同的标签。

所以我想做的是:

输入:

var html = '<iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>';

$scope.video_element = $sce.trustAsHtml(html);

在 Controller 上:

<div ng-bind-html="video_element"></div>

我希望 iframe 在 div 中作为一个整体输出。很多时候，它只是输出一个 n '[object HTMLIFrameElement]' 而不是实际的 iframe。谁能指导我正确的方向？ plunkr 会很棒。

谢谢。

Answer 1

我建议为此使用一个指令，这就是 AngularJS 推荐的将特殊行为附加到 DOM 元素的方法。

我用解决方案创建了一个 Plunkr，检查一下:iframe from a directive .

如果这能解决您的问题，请告诉我。

app.directive('iframeDirective', ['$sce', function($sce) {
return {
    restrict: 'E',
    template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>',
    link: function(scope) {
      scope.trustedUrl = $sce.trustAsResourceUrl("//www.youtube.com/embed/dQw4w9WgXcQ");
    }
  }
}]);