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

并在控制器上：

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

我希望将iframe作为整体输出到div中。很多时候，它只输出一个n＆＃39; [对象HTMLIFrameElement]＆＃39;不是实际的iframe。任何人都可以指导我正确的方向吗？一个笨蛋会很棒。

感谢。

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

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

Answer 3

就我而言，这适用于我，一个自定义过滤器

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

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

3 个答案: