2013-06-09 2 views
8

Я пытаюсь обновить значение области в родительском окне из дочернего всплывающего окна. Но когда я пытаюсь получить доступ к области родительского окна, он возвращает undefined. Поскольку это связано с двумя окнами, я не мог создать скрипку для этого. Пример кода приведен ниже.Доступ к угловому охвату родительского окна из дочернего окна

Главная страница (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.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> 

Здесь каждый раз, когда я пытаюсь получить доступ сферы от углового элемента, как показано на рисунке выше в методе изменения, он возвращает undefined [ae.scope()]. ​​Но когда один и тот же код перемещается в функцию в родительском окне [только различие в том, как элемент «ctrl» обращается к нему], он отлично работал, и я смог обновите переменную области видимости. Может ли кто-нибудь указать, что на самом деле происходит здесь неправильно? Спасибо

+0

Я не уверен, если это будет работать, как участвуют два окна, как дочернее окно не может иметь доступ к Scripts \ функций, загруженных на родителя. Почему вы не смотрите на такие опции, как Angularstrap, у которых есть всплывающее окно модели. Http://mgcrea.github.io/angular-strap/ – Chandermani

+0

@Chandermani Спасибо за предложение. Требования настаивают на использовании всплывающего окна. Так что можете воспользоваться опцией модального окна. Кроме того, дочернее окно будет иметь доступ к dom и скрипту в родительском окне. Поэтому я считаю, что здесь что-то происходит неправильно – Bibin

ответ

10

Используйте angular ссылку от открыватель:

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

Это больше не будет работать, если вы отключите информацию об отладке https://docs.angularjs.org/api/ng/provider/$compileProvider#debugInfoEnabled. Поскольку рекомендуется отключить отладку для производственных приложений, это решение не будет работать. – PickYourPoison

9

У меня была аналогичная потребность и у меня была такая же проблема с доступом к области с помощью углового элемента. Я был в состоянии решить эту проблему следующим образом, хотя:

В вашем основном/родительском контроллере сделать что-то вроде этого:

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

Затем в контроллере дочернего окна вы можете получить доступ к $ windowScope так:

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

Альтернативой помещению данных непосредственно в область охвата будет использование области окна $ broadcast and/or emit events, что является предпочтительным способом связи между контроллерами в угловом режиме.

+0

как вы перемещаете область в дочернее окно. Он говорит scope undefined – Andrei