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的任何想法？

非常感谢大家

Answer 1

ngBindHtml在显示之前将通过 $sce.getTrustedHtml 传递HTML。我怀疑这将是删除您的iframe的原因。

According to the docs，只要您完全信任来自此来源的任何HTML，就可以使用$sce.trustAsHtml避免进行此检查-来自不受信任来源的iframe可能会对您页面的访问者造成很多麻烦。

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

小心! :)