2013-06-09 16 views
8

Sto tentando di aggiornare il valore dell'ambito sulla finestra padre da un popup figlio.Ma quando provo ad accedere all'ambito della finestra genitore, restituisce undefined. Poiché coinvolge due finestre, non potrei creare un violino per questo. Il codice di esempio è incollato di seguito.Accesso alla finestra principale della finestra genitore dalla finestra secondaria

Home (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> 

finestra Bambino (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> 

Qui ogni volta che provo ad accedere portata dall'elemento angolare, come illustrato sopra nel metodo di modifica, restituisce undefined [ae.scope()]. ​​Ma quando lo stesso codice è stato spostato in una funzione nella finestra padre [unica differenza nel modo in cui l'elemento 'ctrl' è in accesso], ha funzionato bene e sono stato in grado di aggiorna la variabile scope. Qualcuno può far notare cosa sta veramente andando storto qui? Grazie

+0

io non sono sicuro se questo funzionerà come due finestre sono coinvolti, come la finestra figlio non può avere l'accesso agli script \ funzioni caricati sul genitore. Perché non guardi le opzioni come Angularstrap, che hanno un popup del modello http://mgcrea.github.io/angular-strap/ – Chandermani

+0

@Chandermani Grazie per il suggerimento. I requisiti insistono sull'utilizzo di un popup. Non posso andare con l'opzione finestra modale. Inoltre, la finestra secondaria sarà in grado di accedere a dom e script nella finestra principale. Quindi credo che qualcos'altro stia andando qui – Bibin

risposta

10

Utilizzare il riferimento angular dalla opener:

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

Questo non funzionerà più se si disattivano le informazioni di debug https://docs.angularjs.org/api/ng/provider/$compileProvider#debugInfoEnabled. Poiché si consiglia di disabilitare il debug per le applicazioni di produzione, questa soluzione non funzionerà. – PickYourPoison

9

Avevo un'esigenza simile e avevo lo stesso problema ad accedere allo scope usando angular.element. Ero stato in grado di risolvere come segue però:

Nel vostro controller/genitore principale fare qualcosa di simile:

$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'); 

Poi nel controller finestra secondaria è possibile accedere $ windowScope come questo:

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

Un'alternativa al mettere i dati direttamente nello scope sarebbe utilizzare l'ambito della finestra $ su broadcast and/or emit events, che è il modo preferito di comunicazione cross-controller in angolare.

+0

come si sposta l'oscilloscopio nella finestra figlia. Dice scope undefined – Andrei

Problemi correlati