Best way to pass data between a parent and popup page in angularjs

Question

I have a page from where I click a button and a popup page opens. I need a way to pass json data from my parent page to popup. These two are separate angular applications.

The data is then modified based on user's actions and is submitted back to the parent page. I've looked at AngularJS: open a new browser window, yet still retain scope and controller, and services which attaches the data to the $window object in parent page controller while opening the popup, assigning the data to the scope of the popup and then assigning the modified data in the popup to the $window.opener object in popup's controller so it's available in the parent.

I was wondering if there is a angular way of accomplishing this by using services and passing data between the two pages/applications.

I've looked at http://answer.techwikihow.com/27863/share-single-service-between-multiple-angular-js-apps.html which shows how to pass data between two ng-apps but I was wondering if there is a cleaner and straightforward solution than that. I don't want to refer to $window object in my popup's controller to access the shared data and then set the opener property. I want to be able to write a shared service which may/may not use $window object(preferably not) and pass data between parent and popup.

Yes. They are two separate angular applications on the same server. — bazzinga, Apr 11 '14 at 18:28

score 1 · Answer 1 · edited Jul 23 '14 at 05:24

I ended up doing the following:

In my parent page controller I did:

function ParentCtrl($scope, window){
    window.parentScope = $scope;
    window.open(childPageURL, params);
}

In my child controller:

function ChildCtrl($scope, window){
    var sharedData = window.opener.parentScope.someData;

    //Some code which changes sharedData

    window.opener.parentScope.someData = sharedData;
    window.opener.parentScope.$apply();
}

It seems to work for me. The only thing I would have liked is to abstract away the logic in a Service which both controllers can talk to and share data from.

Best way to pass data between a parent and popup page in angularjs

1 Answers1