sharing variables between controllers after opening new window angularjs

Question

I am in a situation where I have to pass a user-defined object from one controller to another controller, which is opened in a new window. I tried several common ways for that, like $emit to $rootScope using a factory or a service and $broadcast from there to the second controller.

But I always get stuck in the rootscope. I can log the variables there, but they seem to vanish when the new window opened (not even a undefined appears in the console of the new window). I can get fixed variables from rootscope, but nothing that was emitted from the first controller.

Does anybody have an idea how I can solve this?

Here is my code:

// SHARING DATA BETWEEN CONTROLLERS VIA ROOT SCOPE:

var table_app = angular.module("tableApp", [])
.factory("sharedVars", function($rootScope, $log) {
    /*
     Receive emitted message and broadcast it.
     */
    $rootScope.$on("handleEmit", function(event, object){
        var value1 = object.data1;
        var value2 = object.data2;
        var value3 = object.data3;
        $log.log(value2, value3)           // WORKS
        $rootScope.$broadcast("handleBroadcast", 
            {data1: value1, data2: value2, data3: value3});
    })

    // JUST TO CHECK IF I CAN GET DATA FROM HERE:
    return { fixedSharedObject: {data1: 22, data2: 33, data3: 44}}  // WORKS
})
.controller("FirstCtrl", function ($scope, $rootScope, $q, $log, sharedVars) {
    $scope.onClick = function(number, adress) {
        newWindow = window.open(adress, "Zweitfenster", "width=700, height=900");
        newWindow.focus();
        var lineNumber = document.getElementById("lineCell" + number).innerHTML;
        var blockNumber = document.getElementById("blockCell" + number).innerHTML;
        var tripId = document.getElementById("tripCell" + number).innerHTML;
        $log.log(lineNumber, blockNumber, tripId);                             // WORKS
        $scope.$emit("handleEmit", 
            {data1:lineNumber, data2: blockNumber, data3: tripId});
    }
})
.controller("SecondCtrl", function($scope, $rootScope, $log, sharedVars){
    $scope.singleTripLineNumber = sharedVars.fixedSharedObject;               // WORKS
    $scope.singleTripBlockNumber = sharedVars.fixedSharedObject;
    $scope.$on("handleBroadcast", function(event, object){
        var value1 = object.data1;
        var value2 = object.data2;                                    // DOES NOT WORK!
        var value3 = object.data3;
        $log.log(value3)
    })
});

I don't think that is even possible. – Chandermani Sep 17 '13 at 12:55 — Chandermani, Sep 17 '13 at 12:55
Why don't you accept the answer ? – Sampath Mar 24 '16 at 20:42 — Sampath, Mar 24 '16 at 20:42

Nikos Paraskevopoulos · Answer 1 · 2015-12-17T21:52:38.760

5

You CANNOT do that this way. The JS environments between windows/tabs are not shared. What can you do:

Pass the data as URL/path parameters in window.open(), retrieve them using the $location service from the target controller.
Use browser's local storage (session storage is not shared between tabs, see comment from ejain) if supported, cookies if not.

edited Dec 17 '15 at 21:52

answered Sep 17 '13 at 13:03

Nikos Paraskevopoulos

39,514
12
85
90

1

The "session storage" isn't shared across tabs/windows, so you'd have to use the (persistent) "local storage", see http://stackoverflow.com/questions/20325763/browser-sessionstorage-share-between-tabs. – ejain Dec 17 '15 at 20:38

sharing variables between controllers after opening new window angularjs

1 Answers1