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

by

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.]

More Related Contents:

  1. Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
  2. Update parent scope variable in AngularJS
  3. AngularJS: How can I pass variables between controllers?
  4. Controller not a function, got undefined, while defining controllers globally
  5. How do I share $scope data between states in angularjs ui-router?
  6. Losing scope when using ng-include
  7. Injecting a mock into an AngularJS service
  8. How to do two-way filtering in AngularJS?
  9. AngularJS : Factory and Service? [duplicate]
  10. How to set the id attribute of a HTML element dynamically with angularjs (1.x)?
  11. $watch an object
  12. ion-content and ion-footer have different $scope
  13. Angularjs: call other scope which in iframe
  14. Creating common controller functions
  15. Error: [ng:areq] from angular controller
  16. Angularjs: Error: [ng:areq] Argument ‘HomeController’ is not a function, got undefined
  17. Angularjs: ‘controller as syntax’ and $watch
  18. Dynamic form name attribute in Angularjs
  19. Can an angular directive pass arguments to functions in expressions specified in the directive’s attributes?
  20. How do I configure different environments in Angular.js?
  21. Confirmation dialog on ng-click – AngularJS
  22. Genuinely stop a element from binding – unbind an element – AngularJS
  23. ng-click not working in dynamically created content
  24. Ionic Framework: $scope is undefined in simple alert
  25. Scope issues with Angular UI modal
  26. AngularJS using $rootScope as a data store
  27. What is the difference between $scope.$root and $rootScope?
  28. Angular controller scope not updating after jQuery ajax call
  29. AngularJS event on window innerWidth size change
  30. Does never resolved promise cause memory leak?

Leave a Comment