How to pass the $scope to $window.open in angular js

Question

I need to pass the $scope from my parent window to new window. I coded $window.open() for new window in my javascript function. But in new window, I am not getting the $scope. Below I given the code.

1) JS File

$scope.mainPageNewsArchive = data.newsArchiveList;
var myWindow1 = $window.open("resources/partials/NewFile.html", "News Archive", 'toolbar=0,scrollbars=1,location=0,status=0,menubar=0,resizable=1,width=650, height=550,left = 300,top=100');

2) NewFile.html

<div>
                  <table border="0" cellspacing=0 cellpadding=2 width="100%" id="tkm">
                            <tbody>

                                <tr x-ng-repeat="newsArchive in mainPageNewsArchive track by $index">
                                    <td align=left >{{newsArchive.createDate}}</td>
                                    <td>&nbsp;</td>
                                    <td align=left><a href="" ng-click="showNewsItem(newsArchive.id)" title="Click for more detail">{{newsArchive.title}}</a>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
</div>

RobSeg · Accepted Answer · 2015-08-07 09:19:33Z

3

A window which is opened by your main window will architecturally be unable to share the same scope with its parent. Because the angular scope is defined per DOM element. But you can pass data by using the window object returned from the window.open() method

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.

OR

You could reference the rootscope of the newly spawned window and then communicate an event through the scope of the child window from the parent.

Parent:

var newWindowRef = $window.open("", "New Window", "width=1280,height=890,resizable=1");
var newWindowRootScope = newWindowRef.angular.element("#MY_ROOT_APP_ELEMENT_ID").scope();
newWindowRootScope.$broadcast("INTER_WINDOW_DATA_TRANSFER", {someData : "I'm data"});

Child:

$rootScope.$on("INTER_WINDOW_DATA_TRANSFER", function (data, args) {                   
        console.log("DATA RECEIVED: " + args.someData);
    });

answered Aug 7, 2015 at 9:19

RobSeg

1,0954 gold badges16 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vignesh selvarathinam Over a year ago

$rootScope.$on is not invoking

Blaine Over a year ago

The reason this isn't working is that newWindowRef.angular.element("#X").scope() doesn't return the child's controller's $rootScope, it returns the child's controller's $scope. To make the example work, register the "on" with $scope not $rootScope: $scope.$on(...)

Blaine Over a year ago

...Another couple points: You should use $window instead of window. And you have to give the child a second to render before the parent can get the child's $scope, so do the parent action within a $timeout(x, 1000).

Saurabh Verma · Accepted Answer · 2016-04-20 21:57:39Z

2

You can get a copy of the parent scope by typing this in your parent controller:

$window.ScopeToShare = $scope;

and this in the controller used for your child window:

if($window.parent != null)
{
ParentScope = $window.opener.ScopeToShare;
}

answered Apr 20, 2016 at 21:57

Saurabh Verma

1921 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to pass the $scope to $window.open in angular js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related