AngularJS:打开一个新的浏览器窗口,但仍保留范围和控制器以及服务

Question

我正在写一个angularJS应用程序.在这个特定的控制器中,我通过该$window.open服务打开一个新的浏览器窗口.但是在新窗口中,所有$scope变量都会丢失.

我尝试使用,window.parent但这不起作用.事实上,在新的浏览器窗口中,所有应用程序服务,控制器或作用域根本不起作用,这是真的吗？有没有办法打开一个新的浏览器窗口,但仍然使新窗口属于旧窗口中相同的角度应用程序？我需要访问一些angularJS服务和打开该新窗口的控制器的范围.这有可能吗？

Answer 1

没有[直接]方法使新窗口属于同一个angular.js应用程序,因为角度应用程序通常与窗口的文档,窗口和事件相关联,它通过ng-app指令初始化或者通过调用angular.bootstrap.

但是,您可以为弹出窗口创建新的角度模块和应用程序.您可以通过包含相应的javascript文件,使用原始应用程序中的相同基本服务和控制器.

假设您的弹出窗口需要原始应用程序中的数据,您可以使用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)

[同意,我敢肯定,如果你研究了角度源代码,你可以找到一些聪明的方法来为两个窗口使用相同的角度应用程序.这种尝试超出了我今晚的野心.]

Answer 2

由主窗口打开的窗口在架构上将无法与其父窗口共享相同的根范围.因为角度范围是根据DOM元素定义的.您需要在子窗口中引导一个全新的AngularJs应用程序.

提供了一个新窗口(子窗口),它托管另一个AngularJs应用程序,由主窗口(父窗口)生成,以下解决方案可行:从父窗口引用新生成的窗口的根范围,然后传递事件通过父窗口的子窗口范围.像这样的东西:

在子窗口上:

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

在父窗口中,您将获取定义了ng-app属性的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"});

Answer 3

您可以使用window对象传递数据:

句法:

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

示例:

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

(注意: - 这将打开新链接并设置变量数据)在新页面控制器中,您可以使用访问变量 oldata = window.var1;