2013-06-09 13 views
8

Ich versuche, Bereichswert im übergeordneten Fenster von einem untergeordneten Popup zu aktualisieren. Wenn ich jedoch versuche, auf den übergeordneten Fensterbereich zuzugreifen, wird nicht definiert zurückgegeben. Da es sich um zwei Fenster handelt, konnte ich dafür keine Geige erzeugen. Codebeispiel wird unten eingefügt.Zugriff auf übergeordnetes Fenster Winkelbereich von Kindfenster

Startseite (main.html)

<!doctype html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script> 
    var myApp = angular.module('myApp',[]); 
    function MyCtrl($scope) { 
     $scope.name = 'Superhero'; 
    } 
    </script> 
    </head> 
    <body ng-app="myApp"> 
    <div id="ctrl" ng-controller="MyCtrl"> 
     Hello, {{name}}! 
     <input type="button" value="Open popup!!" onclick="window.open('child.html');"/> 
    </div> 
    </body> 
</html> 

Child Fenster (child.html)

<!doctype html> 
<html > 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script> 
    function change(){ 
     var e = window.opener.document.getElementById('ctrl'); 
     var ae = angular.element(e); 
     var s = ae.scope(); 
     s.name="New Superhero"; 
     s.$apply(); 
    } 
    </script> 
    </head> 
    <body> 
     <input type="button" value="Update parent scope!" onclick="change();"/> 
    </body> 
</html> 

Hier wenn ich versuche, von dem Winkelelement Umfang zuzugreifen, wie gezeigt oben in der Methode change, gibt es undefined [ae.scope()]. ​​Aber wenn der gleiche Code zu einer Funktion im übergeordneten Fenster verschoben [nur Unterschied in wie 'Ctrl' Element zugegriffen wird], es hat gut funktioniert und ich konnte Aktualisieren Sie die Bereichsvariable. Kann jemand darauf hinweisen, was hier eigentlich schief läuft? Danke

+0

Ich bin nicht sicher, ob dies funktionieren wird als zwei Fenster beteiligt sind, wie das Kind Fenster nicht den Zugang zu den Scripts \ Funktionen auf Eltern geladen hat. Warum schaust du nicht auf Optionen wie Angularstrap, die ein Modell-Popup haben http://mgcrea.github.io/angular-strap/ – Chandermani

+0

@Chandermani Danke für den Vorschlag.Requirement bestehen auf die Verwendung eines Popup.So kann nicht mit modalen Fensteroption gehen. Außerdem kann das untergeordnete Fenster auf Dom und Skript im übergeordneten Fenster zugreifen. Ich glaube also, dass hier etwas anderes schief geht. – Bibin

Antwort

10

Verwenden Sie den angular Verweis aus dem Opener:

function change() { 
    var s = window.opener.angular.element('#ctrl').scope(); 
    s.name="New Superhero"; 
    s.$apply(); 
} 
+3

Dies wird nicht mehr funktionieren, wenn Sie Debug-Informationen https://docs.angularjs.org/api/ng/provider/$compileProvider#debugInfoEnabled deaktivieren. Da es empfohlen wird, das Debugging für Produktionsanwendungen zu deaktivieren, funktioniert diese Lösung nicht. – PickYourPoison

9

Ich hatte eine ähnliche Notwendigkeit und hatte das gleiche Problem beim Zugriff auf den Anwendungsbereich mit angle.element. Ich war in der Lage, es zu lösen, als ob folgt:

In Ihrem Haupt/Eltern-Controller etwas tun, wie folgt aus:

$scope.food = 'Mac & Cheese'; 
window.$windowScope = $scope; 
$window.open('views/anotherWindow.html', '_blank','menubar=yes,toolbar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes,personalbar=yes'); 

dann im Kindfenster Controller Sie $ windowScope wie folgt zugreifen können:

$scope.parentWindow = window.opener.$windowScope; 
console.log($scope.parentWindow.food); 

Eine Alternative zum direkten Einfügen von Daten in den Gültigkeitsbereich wäre die Verwendung von $ window scope zu broadcast and/or emit events, was der bevorzugte Weg für die cross-controller Kommunikation in angular ist.

+0

Wie verschiebt man den Scope in das Child-Fenster? Es sagt den Umfang undefined – Andrei

Verwandte Themen