在AngularJS中动态地将iframe插入页面

Question

我正在尝试使用Angular 1.2动态地将iframe插入到页面中。这是代码：

HTML：

<div id="player_wrapper" ng-cloak>
    <div ng-bind-html="player"></div>
</div>

JS：

$http({method: 'GET', url: url}).
    success(function(data, status) {
        $scope.player = data.html;
    }.......

因此data.html是一个字符串，其中包含以

开头的有效HTML

<iframe ...>

该字符串还包含一些div。所以它看起来像：

<iframe src='...' ...></iframe><div>some stuf</div>

我在app.js'ngSanitize'中使用。它显示的是div（在iframe之后），但不是iframe本身。

如果我使用jQuery，基本上是

$(#'player_wrapper').html(data.html)

工作得很好......但是试图让它成为正确的角度。

为什么只显示iframe之后的div？

非常感谢所有人

Answer 1

在显示之前，

ngBindHtml会将您的HTML通过$sce.getTrustedHtml。我怀疑这会删除你的iframe。

According to the docs您可以使用$sce.trustAsHtml来避免此检查，只要您完全信任来自此来源的任何HTML - 来自不受信任来源的iframe可能会对访问者提供令人讨厌的内容。你的页面。

$http({method: 'GET', url: url}).
    success(function(data, status) {
        $scope.player = $sce.trustAsHtml(data.html);
    }.......

小心！ ：）

Answer 2

您需要使用documentation of ng-bind-html：

中所述的$sce服务

$scope.player = $sce.trustAsHtml('your html goes here');

有关示例，请参阅this plunk：

Answer 3

经过多次麻烦我设法得到了一个很好的设置，我可以动态地将iframe加载到我的页面并将信息传递给它。

我做了a github project。它使用单个指令传递原始输入元素信息，并使用ngSanatize作为$sce.trustAsResourceUrl函数。

Here is the live demo