AngularJS shared service not acting as singleton between modules

Question

I have seen numerous flavors of this question, but cannot seem to find the right answer for my issue.

The problem with the following is the service cannot share data between the other modules/controllers. It does not act as a singleton. Meaning, if I add windows in dashboard and call windowService.getWindows() I will see the windows I added. But if I do the same from myWidget after adding them via the dashboard, or vice versa, the collection in the service is empty as if the other module/controller hasn't added anything. What am I doing wrong here? I expected a single collection of windows to be retained by the service and be accessible from either of my other modules.

Module 1

var dashboard = angular.module('dashboard', [windowServiceModule]);
dashboard.controller('DashboardController', function DashboardController(windowService) {...stuff});

Module 2

var myWidget = angular.module('myWidget', [windowServiceModule]);
myWidget.controller('MyWidgetController', function MyWidgetController(windowService) {...stuff});

Service

var windowServiceModule = angular.module('windowService', []);
windowServiceModule.service('windowService', function() {
   var windows = [];
   this.addWindow = function(win)
   {
      this.windows.push(win)
   }

   this.getWindows = function()
   {
      return this.windows;
   }
});

EDIT: while walking through other answers, I tried this: Share a single service between multiple angular.js apps

That exposed a part of the problem, I think. The above suggests iterating over a $rootScope collection, but in my case, there is only one $rootScope in the collection and it is not the same between dashboard and myWidget. As it is, myWidget is in an iframe and now I'm thinking I need to take a different approach, currently testing a solution similar to the link I left in the comments.

I believe `var windows = [];` and `this.windows.push` / `this.windows()` are referring to different instances due to the use of `this`. Try removing `this` from `this.windows....` — Igor, Jan 04 '21 at 21:48
Also that should be `return windows;` without the ellipse at the end. — Igor, Jan 04 '21 at 22:04
Ya, trying your first solution now, but the return was correct in my code, I typed up this example instead of copy+pasting because I like working harder and making more mistakes ;) — Jacob Barnes, Jan 04 '21 at 22:07
It doesn't appear that had any effect. Removing the `this` still results in the same issue. FWIW, I also tried using `this.windows` instead of `var windows`. — Jacob Barnes, Jan 04 '21 at 23:32
Currently trying a similar thing to this: https://stackoverflow.com/questions/38378386/angularjs-using-common-service-in-different-modules — Jacob Barnes, Jan 04 '21 at 23:48
No luck with the previous solution, currently trying something similar to this: https://stackoverflow.com/questions/28318633/access-angularjs-service-from-a-service-inside-a-different-frame — Jacob Barnes, Jan 05 '21 at 00:47
In regard the the above link, I really wasn't wanting access the other scope, I think I can get that to work, but I was sort of thinking scope wasn't in this equation. I just have the state maintained in the service and update/get it from the modules. This is more like walking the chain back up to the parent and using the state in its scope. Eh, whatever, if it works I'm keeping it, lol — Jacob Barnes, Jan 05 '21 at 00:50

Jacob Barnes · Accepted Answer · 2021-01-05T21:57:42.360

Ok, I'm pretty sure my initial code would have worked fine if the myWidget wasn't being loaded in an iframe. I have a dashboard that can open windows embedded or popped out and I wanted to use the service to manage the windows and handle passing state back and forth since popping out the iframe requires a reload of the page.

Anyways, I now have something like this in place in the service and it is working:

var windowServiceModule = angular.module('windowService', []);
windowServiceModule.service('windowService', function($window) {
   ...stuff
   var parentScope = $window.parent.getScope();
   ...other stuff

After that you can access anything in the parent's scope with parentScope. I pass in the angular $window.

Just for reference, getScope() already existed in the parent JSP file. This is what is looks like:

function getScope()
{
   return angular.element($("#DashboardController")).scope();
}

AngularJS shared service not acting as singleton between modules

1 Answers1