Вставлять iframe в страницу динамически в AngularJS

Я пытаюсь динамически вставить iframe на страницу с Angular 1.2. Вот код:

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)

отлично работает... но пытается сделать его правильным угловым.

Любая идея о том, почему отображаются только div после iframe?

Большое спасибо всем

Ответ 1

ngBindHtml передаст ваш HTML через $sce.getTrustedHtml перед его отображением. Я подозреваю, что это то, что удалит ваш iframe.

В соответствии с документами вы можете использовать $sce.trustAsHtml, чтобы избежать этой проверки, пока вы полностью доверяйте любому HTML, исходящему из этого источника - iframe из ненадежного источника может, вероятно, сделать число на неприятных вещах посетителям вашей страницы.

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

Будьте осторожны!:)

Ответ 2

Вам необходимо использовать службу $sce, как описано в документации по ng-bind-html:

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

См. эту панель для примера:

Ответ 3

После многих неприятностей мне удалось получить хорошую настройку, где я могу динамически загружать iframes на мою страницу и передавать информацию через нее.

Я сделал этот проект github. Он использует единую директиву для передачи исходной информации о входных элементах, а также использует ngSanatize для функции $sce.trustAsResourceUrl.

Вот живая демонстрация