phamductri phamductri - 4 months ago 231
AngularJS Question

AngularJS: open a new browser window, yet still retain scope and controller, and services

I'm writing an angularJS app. In this particular controller, I open a new browser window through the

$window.open
service. But in the new window, all the
$scope
variables are lost.

I tried to use
window.parent
but this doesn't work. In fact in the new browser window all the app services, controllers, or scopes are not in effect at all, is this true? Is there a way to open a new browser window yet still makes the new window belongs to the same angular app in the old window? I need to have access to some angularJS services and the scope of the controller that open that new window. Is this possible at all?

Answer

There is no [straightforward] way to make the new window belong to the same angular.js application, since the angular application is generally tied to the document, window, and events of the window where it was initialized either via an ng-app directive or by calling angular.bootstrap.

However, you can create a new angular module and application for your popup window. You could use the same basic services and controllers from your original application by including the appropriate javascript files.

Presuming your popup window needs data from the original application, you can pass that by using the window object returned from the window.open() method. For example, within your first angular application, open your popup window like so:

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

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

});

Once your secondary "popup" angular application is initialized, it can then reference the shared data by reading window.mySharedData.

You can also create functions in each window that can be called from the other window. The popup window can call back into the original window by using the window.opener property. (window.parent refers to the parent window of frames, you want window.opener)

[Agreed, I'm sure that if you studied the angular source code you could find some clever way to use the same angular app for both windows. Such an attempt is beyond my ambition this evening.]

Comments