2013-06-09 15 views
8

Próbuję zaktualizować wartość zakresu w oknie nadrzędnym z wyskakującego okna podrzędnego. Jednak za każdym razem, gdy próbuję uzyskać dostęp do zakresu nadrzędnego okna, funkcja ta zwraca wartość undefined. Ponieważ obejmuje to dwa okna, nie mogłem stworzyć dla tego skrzypiec. Próbka kodu została wklejona poniżej.Uzyskiwanie dostępu do zakresu kątowego okna nadrzędnego z okna podrzędnego

strona główna (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> 

okno dziecko (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> 

tu, gdy próbuję uzyskać dostęp zakresu od elementu kątowego, jak pokazano powyżej w metodzie zmiany, zwraca undefined [ae.scope()], ale kiedy ten sam kod został przeniesiony do funkcji w oknie nadrzędnym [tylko różnica w sposobie uzyskiwania dostępu do elementu ctrl], działało dobrze i udało mi się zaktualizuj zmienną zasięgu. Czy ktokolwiek może wskazać, co się tutaj dzieje? Dzięki

+0

Nie jestem pewien, czy to będzie działać jako zaangażowane są dwa okna, ponieważ okno dziecko może nie mieć dostępu do scripts \ funkcji załadowanych na rodzica. Dlaczego nie patrzysz na opcje takie jak Angularstrap, które mają wyskakujący model http://mgcrea.github.io/angular-strap/ – Chandermani

+0

@ Chandermani Dzięki za sugestię. Wymagania nalegają na użycie popup.So nie można przejść z opcją okna modalnego. Ponadto okno potomne będzie mogło uzyskać dostęp do dom i skryptu w oknie nadrzędnym. Więc wierzę, że coś innego idzie nie tak tutaj, – Bibin

Odpowiedz

10

Użyj odniesienie angular z otwieraczem:

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

To nie będzie działać, jeśli wyłączysz informacje diagnostyczne https://docs.angularjs.org/api/ng/provider/$compileProvider#debugInfoEnabled. Ponieważ zalecane jest wyłączenie debugowania dla aplikacji produkcyjnych, to rozwiązanie nie będzie działać. – PickYourPoison

9

Miałem podobną potrzebę i miałem ten sam problem z dostępem do zakresu za pomocą angular.element. I był w stanie rozwiązać go w następujący sposób choć:

w głównym kontrolerem/dominującej zrobić coś takiego:

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

Następnie w sterowniku okna dziecko można uzyskać dostęp do $ windowScope tak:

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

Alternatywą dla umieszczania danych bezpośrednio w zakresie byłoby użycie zakresu okna $ do broadcast and/or emit events, który jest preferowanym sposobem komunikacji krzyżowej kontrolera w kanciastym.

+0

Jak przenieść zakres do okna podrzędnego. Podano zakres niezdefiniowany – Andrei

Powiązane problemy