fügen Sie dynamisch einen iframe in AngularJS in die Seite ein

Ich versuche zum dynamischen einfügen eines iframe in eine Seite mit Winkel-1.2. Hier ist der code:

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;
    }.......

Also die data.html ist ein string, der eine gültige HTML-beginnend mit

<iframe ...>

Die Zeichenfolge enthält auch einige div. So könnte es Aussehen:

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

Ich in app.js 'ngSanitize'. Was es zeigt, ist der div (nach dem iframe), aber nicht der iframe selbst.

Wenn ich jQuery verwenden, im Grunde ein

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

funktioniert... aber versuchen, es zu machen richtige angularJS.

Jede Idee, warum nur die divs nach dem iframe angezeigt werden?

Vielen Dank allen

Kommentar zu dem Problem - Öffnen
Können Sie versuchen mit ng-include. Kommentarautor: Chandermani
so probiert:<div ng-include="Spieler"></div> und eine Fehlermeldung erhalten XMLHttpRequest (ich bin lokal entwickeln, so habe ich ein file:// in der url...) Kommentarautor: user2929613

InformationsquelleAutor der Frage user2929613 | 2013-11-23

  1. 32

    ngBindHtml geben Ihre HTML durch $sce.getTrustedHtml, bevor es angezeigt wird. Ich vermute, dass dies ist, was wäre das entfernen Ihrer iframe.

    Laut der docs können Sie $sce.trustAsHtml um dies zu vermeiden, überprüfen Sie so lange, wie Sie voll Vertrauen alle HTML aus dieser Quelle - in einem iframe von einer nicht vertrauenswürdigen Quelle könnte wahrscheinlich eine Menge böse Dinge an die Besucher zu Ihrer Seite.

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

    Vorsichtig sein! 🙂

    InformationsquelleAutor der Antwort Andyrooger

  2. 7

    Müssen Sie die $sce service als desribed in der Dokumentation der ng-bind-html:

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

    Sehen diese plunk ein Beispiel:

    InformationsquelleAutor der Antwort lex82

  3. 4

    Nach viel Mühe habe ich es geschafft, ein nettes setup, wo kann ich das dynamische laden von iframes in meiner Seite und pass-Informationen durch.

    Habe ich dieses ein github-Projekt. Es verwendet eine einzelne Richtlinie für die übergabe von raw-input-element Informationen, und auch verwendet ngSanatize für die $sce.trustAsResourceUrl Funktion.

    Hier ist der live-demo

    InformationsquelleAutor der Antwort james2doyle

Schreibe einen Kommentar