web-dev-qa-db-de.com

Angularjs: ruft andere Gültigkeitsbereiche auf, die in iframe angezeigt werden

In meinem Test, gegeben von 2 Dokumenten, A und B. In A-Dokument gibt es einen Iframe, die Iframe-Quelle ist B-Dokument. Meine Frage ist, wie man einen bestimmten Bereich der Variablen in einem B-Dokument modifiziert.

Hier ist mein Code: Ein Dokument

<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <script type='text/javascript' src="js/jquery-1.10.2.js"></script>
  <script type='text/javascript' src="js/angular1.0.2.min.js"></script>
  <script>
  var g ;
function test($scope,$http,$compile)
{
    $scope.tryget = function(){

        var iframeContentWindow = $("#iframe")[0].contentWindow;
        var iframeDOM = $("#iframe")[0].contentWindow.document;
        var target = $(iframeDOM).find("#test2");
        var iframeAngular = iframeContentWindow.angular;
        var iframeScope = iframeAngular.element("#test2").scope();
        iframeScope.parentcall();
        iframeContentWindow.angular.element("#test2").scope().tempvalue = 66 ;
        iframeScope.tempvalue = 66;
        iframeContentWindow.tt = 22;
        iframeScope.parentcall();
        console.log(iframeScope.tempvalue);
        console.log(angular.element("#cont").scope());
    }
}

  </script>
</head>
<body>

<div ng-controller="test">
        <div id="cont" >
            <button ng-click="tryget()">try</button>
        </div>
</div>
<iframe src="test2.html" id="iframe"></iframe>

</body>
</html>

Mein B-Dokument:

<!doctype html>
<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <script type='text/javascript' src="js/jquery-1.10.2.js"></script>
  <script type='text/javascript' src="js/angular1.0.2.min.js"></script>
  <script>
var tt =11;
function test2($scope,$http,$compile)
{
    console.log("test2 controller initialize");
    $scope.tempvalue=0;
    $scope.parentcall = function()
    {
        $scope.tempvalue = 99 ;
        console.log($scope.tempvalue);
        console.log(tt);
    }
}

  </script>
</head>
<body>

<div ng-controller="test2" id="test2">
        <div id="cont" >
            <button ng-click="parentcall()">get script</button>
        </div>
        {{tempvalue}}
</div>

</body>
</html>

Hinweis: Eigentlich gibt es eine Möglichkeit, dies zu tun. Ich empfinde es als einen Hack als einen richtigen Weg, um es zu erledigen: Das ist eine Schaltfläche in b Document und binde dann mit Angle-Klick. Danach klicken Sie auf eine Schaltfläche "Dokument Jquery".

javascriptangularjsangularjs-scope
24
Stupidfrog

Gehen Sie folgendermaßen vor, um in zwei Richtungen (übergeordnetes zu iFrame, iFrame zu übergeordnetes Element) zuzugreifen und zu kommunizieren, wenn beide in derselben Domäne sind und Zugriff auf den Winkelbereich haben: 

* Sie brauchen kein Elternteil, um einen Verweis auf die angleJS-Bibliothek zu haben…

Untergeordneter iFrame von übergeordneten aufrufen

1.Geben Sie das untergeordnete iFrame-Element vom übergeordneten Element ab ( Link zur Antwort ): 

document.getElementById ("myIframe"). contentWindow

2.Greifen Sie auf den Umfang des Elements zu: 

document.getElementById ("myIframe"). contentWindow.angular.element ("# someDiv"). scope ()

3.Rufen Sie die Funktion oder Eigenschaft des Bereichs auf: 

document.getElementById ("myIframe"). contentWindow.angular.element ("# someDiv"). scope (). someAngularFunction (data);

4.Call $ scope. $ Anwenden, nachdem die Logik der Funktion ausgeführt/die Eigenschaft aktualisiert wurde ( Link zu Mishkos Antwort ): 

$ scope. $ apply (function () {});

  • Eine andere Lösung besteht darin, den Geltungsbereich zwischen den iFrames zu teilen, aber dann müssen Sie auf beiden Seiten winklig sein: ( Link zur Antwort und Beispiel )

Eltern von unterem iFrame anrufen

  1. Aufruf der übergeordneten Funktion: 

parent.someChildsFunction ();

Wird auch aktualisieren, wie es domänenübergreifend zu tun ist, wenn dies erforderlich ist.

46
Urigo

Sie sollten in der Lage sein, den übergeordneten Bereich von iFrame abzurufen:

var parentScope = $window.parent.angular.element($window.frameElement).scope();

Dann können Sie die übergeordnete Methode aufrufen oder die übergeordnete Variable ändern (denken Sie jedoch daran, parentScope.$apply zum Synchronisieren der Änderungen aufzurufen)

Getestet auf Winkel 1.3.4

13
Yiding

Die beste Möglichkeit, mit dem Iframe zu kommunizieren, ist meiner Meinung nach window.top. Wenn Sie möchten, dass Ihr iframe den Gültigkeitsbereich Ihres übergeordneten Objekts erhält, können Sie window.scopeToShare = $scope; in Ihrem Controller festlegen. Der Zugriff auf die iframe-Seite erfolgt unter window.top.scopeToShare.

Wenn Sie möchten, dass Ihr Elternteil den iframe-Geltungsbereich erhält, können Sie verwenden

window.receiveScope = function(scope) {
  scope.$on('event', function() {
    /* Treat the event */
  }
};

und innerhalb des iframe-Controller-Aufrufs window.top.giveRootScope($rootScope);

WARNUNG: Wenn Sie diesen Controller mehrmals verwenden, stellen Sie sicher, dass Sie eine zusätzliche ID verwenden, um den gewünschten Bereich zu identifizieren.

3
Benoit Tremblay

Dieser ist ziemlich einfach und funktioniert für mich:

im Controller-Code der iframe-Seite:

$window.parent.window.updatedata($scope.data);

im übergeordneten Seitencontrollercode:

window.updatedata = function (data) {
 $scope.$apply(function () {
     $scope.data = data
   }
 }
0
Erjan Kelder