angularjs - 在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)

工作正常......但试图使其正确的angularJS。

关于为什么只显示 iframe 之后的 div 的任何想法？

非常感谢大家

score 34 · Accepted Answer

ngBindHtml$sce.getTrustedHtml将在显示之前传递您的 HTML 。我怀疑这会删除你的 iframe。

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

当心！:)

score 8 · Accepted Answer

您需要使用ng-bind-html 文档中描述$sce的服务：

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

有关示例，请参见此 plunk ：

score 4 · Accepted Answer

在经历了很多麻烦之后，我设法获得了一个不错的设置，我可以动态地将 iframe 加载到我的页面中并将信息传递给它。

我把它做成了一个 github 项目。它使用单个指令来传递原始输入元素信息，也ngSanatize用于$sce.trustAsResourceUrl函数。

3 回答 3