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

【问题标题】：How to insert an iframe with angular.js using $sce?如何使用 $sce 插入带有 angular.js 的 iframe？
【发布时间】：2014-11-28 04:58:47
【问题描述】：

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

所以我想做的是：

输入：

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

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

在控制器上：

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

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

谢谢。

【问题讨论】：

您好，我的回答解决了您的问题吗？

标签： javascript html angularjs iframe

【解决方案1】：

在我的情况下，这对我有用，一个自定义过滤器

app.filter('iframe', ['$sce', function($sce) {
return function(input) {
        input = $sce.trustAsResourceUrl(input);
        return input;
    };
}]);

【讨论】：

【解决方案2】：

为此，您将需要一个自定义指令。

app.directive('mySrc', ['$sce', function($sce) {
    return function(scope, element, attr) {
        scope.$watch($sce.trustAsUrl(attr.mySrc), function(value) {
            $(element).attr({src: attr.mySrc || ''});
        });
    };
}])

然后

<iframe my-src="//www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

【讨论】：

【解决方案3】：

我建议为此使用指令，这就是 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");
    }
  }
}]);

【讨论】：