27

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

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

+1

Вам нужно открыть новое окно? Или будет что-то вроде модального окна, где вы можете ввести область. http://angular-ui.github.io/bootstrap/#/modal. Запуск экземпляра нового окна с той же областью может стать очень грязным. –

+0

Если вы открываете новое окно, у вас есть полный html. Итак, вам нужно другое объявление 'ng-app'. –

+0

привет, нет, я не могу использовать модальное окно, я пытаюсь отобразить таблицу с большим количеством строк, модальное окно сделает UI выглядеть супер уродливым. – phamductri

ответ

27

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

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

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

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

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

}); 

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

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

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

+26

Где есть воля, есть хаки :) – Chandermani

+2

привет, я не создал новое угловое приложение. Я использовал ваши методы настройки общих данных через window.mySharedData, на самом деле, я думаю, вы можете экспортировать $ scope и все необходимые вам службы через такие методы. Благодарю. – phamductri

+5

@phamductri Это будет очень полезно, если вы сможете поделиться своим окончательным кодом. –

9

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

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

На дочернее окно:

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

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

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"}); 
+0

Это не очень хорошее решение. $ window.open не ждет, пока документ будет готов, прежде чем возвращать новый дескриптор окна. Ссылка на элемент дочернего окна возвращает Undefined, если это окно не открывается очень быстро. Кроме того, у пользователя может быть блокировщик всплывающих окон. Самый безопасный способ - позволить ребенку вызвать родителя (window.opener), чтобы получить то, что ему нужно. – otterslide

6

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

Синтаксис:

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

Пример:

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^