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.open('<linkname>').<variableName> = "your data";

示例：

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

（注意： - 这个会打开新链接并设置变量数据）在新页面控制器中，您可以使用访问变量 oldata = window.var1;

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

3 个答案: