Share variable between two windows. Angularjs - angularjs

Question

From my angularjs application I open a new window:
$window.open($state.href('catalog-detalleTicketMapa', {
id: $localStorage.idRamdom
}), 'window', 'height=700,width=700');
And when I close that new window I want the parent window to know about that event, and I do the following
// controller auxiliary window
vm.onExit = function () {
$rootScope.$broadcast('ventanaCerrada');
};
$window.onbeforeunload = vm.onExit;
// controller main windows
$scope.$on('ventanaCerrada', function () {
$rootScope.ventanaAbierta = false;
});
If it enters the event $rootScope.$broadcast but not to the event scope.$on.
I have also tested with localStorage, but it is only updated in the auxiliary window, but the main one does not.
How can I share a variable between two open windows at the same time in my browser?

Answer 1

When you open a new window with $window.open, it won't share the scope with the calling window, so it's impossible (afaik) to broadcast anything between them with angular. But the calling window can access global variables in the opened window, so I'm using something like an observer to watch that variable.
I have the following code in a WindowService to open the new window (we only open a single window; if you need more, you need to adjust the code):
angular.module('myproject')
.service('WindowService', ['$window', '$interval', '$timeout',
function ($window, $interval, $timeout) {
var self = this;
this.myOpenWindow = null;
// opens a window and starts the wait-function
this.openWindow = function (url, callbackFn) {
// open the window
self.myOpenWindow = $window.open(url);
// Puts focus on the new window
if (window.focus) {
self.myOpenWindow.focus();
}
// check for response in opened window
self.waitForResponse(callbackFn);
};
this.waitStarted = false;
this.waitForResponse = function (callbackFn) {
if (!self.waitStarted && self.myOpenWindow) {
self.waitStarted = true;
var intervalPeriod = 1000; // check once every second
var waitHandler;
waitHandler = $interval(function (index) {
if (self.myOpenWindow.closed) {
// window was closed, commence cleaning operation
$interval.cancel(waitHandler);
waitHandler = $timeout(function () {
// re-initialize waitStarted so it can be used again
self.waitStarted = false;
// call callback-Function when the window is closed
if (callbackFn) {
callbackFn();
}
}, intervalPeriod);
} else {
// window is still open, check if the observed variable is set
if (self.myOpenWindow && self.myOpenWindow.response_message) {
var message = self.myOpenWindow.response_message;
// do what you want with the message
// ...
// afterwards close the window (or whatever)
if (self.myOpenWindow) {
self.myOpenWindow.close();
}
}
}
}, intervalPeriod);
}
};
}
]);
In the opened window you need to set that global variable somewhere, e.g. like this:
window['response_message'] = { 'result': 'Done' };

Answer 2

Normally you can't share storage data between two windows. If you really need that changes in data in one window reflect in another window then use socket or firebase to get real-time data.