AngularJS: откройте новое окно браузера, но все же сохраните область действия и контроллер, а также службы

Я пишу приложение angularJS. В этом конкретном контроллере я открываю новое окно браузера через службу $window.open. Но в новом окне все переменные $scope теряются.

Я пытался использовать window.parent, но это не работает. Фактически, в новом окне браузера все приложения, контроллеры или области приложения не действуют вообще, это правда? Есть ли способ открыть новое окно браузера, но все же делает новое окно в том же приложении angular в старом окне? Мне нужно иметь доступ к некоторым сервисам angularJS и объему контроллера, которые открывают это новое окно. Возможно ли это вообще?

Ответ 1

Нет способа [прямолинейного] сделать новое окно принадлежащим к тому же приложению angular.js, поскольку приложение angular обычно связано с документом, окном и событиями окна, в котором оно было инициализировано либо с помощью директивы ng-app, либо путем вызова angular.bootstrap.

Однако вы можете создать новый модуль и приложение angular для вашего всплывающего окна. Вы можете использовать одни и те же базовые службы и контроллеры из вашего исходного приложения, включив соответствующие файлы javascript.

Предполагая, что вашему всплывающему окну нужны данные из исходного приложения, вы можете передать это, используя объект окна, возвращенный из метода window.open(). Например, в вашем первом приложении angular откройте всплывающее окно следующим образом:

angular.module('originalModule').service('popupService', function(someOtherDataService) {

  var popupWindow = window.open('popupWindow.html');
  popupWindow.mySharedData = someOtherDataService.importantData;

});

После инициализации вашего вторичного всплывающего приложения angular он может ссылаться на общие данные, читая window.mySharedData.

Вы также можете создавать функции в каждом окне, которые могут быть вызваны из другого окна. Всплывающее окно может вернуться в исходное окно с помощью свойства window.opener. (window.parent относится к родительскому окну кадров, вы хотите window.opener)

[Согласен, я уверен, что если бы вы изучили исходный код angular, вы могли бы найти какой-нибудь умный способ использовать одно и то же приложение angular для обоих окон. Такая попытка сегодня не в моих амбициях.]

Ответ 2

Окно, открытое вашим основным окном, будет архитектурно неспособен разделить одну и ту же корневую область с родительским. Поскольку область angular определена для элемента DOM. Вам нужно загрузить в окно дочернего окна совершенно новое приложение AngularJs.

При условии, что новое окно (дочернее), в котором размещено другое приложение AngularJs, появилось в главном окне (родительском), следующее решение может быть жизнеспособным: ссылаясь на область корня недавно созданного окна из родительского окна, а затем передача события через область дочернего окна от родителя. Что-то вроде этого:

В дочернее окно:

$rootScope.$on("INTER_WINDOW_DATA_TRANSFER", function (data, args) {                   
            console.log("DATA RECEIVED: " + args.someData);
        });

В родительском окне вы берете элемент DOM (в дочернем окне), на котором определен атрибут ng-app (его корневая область) (псевдокод ):

var newWindowRef = $window.open("", "New Window", "width=1280,height=890,resizable=1");
var newWindowRootScope = newWindowRef.angular.element("#MY_ROOT_APP_ELEMENT_ID").scope();
newWindowRootScope.$broadcast("INTER_WINDOW_DATA_TRANSFER", {someData : "I'm data"});

Ответ 3

Вы можете передавать данные с помощью оконного объекта:

Синтаксис:

$window.open('<linkname>').<variableName> = "your data";

Пример:

$window.open('<linkname>').var1 = "value1";

(Примечание: - Это откроет новую ссылку и установит переменные данные) В новом контроллере страницы вы можете получить доступ к переменной, используя oldata = window.var1;