Parent module as dependency

Question

My application has an angular module:

var io = angular.module('IO_Operations', []);

The module also has a Service to realize input/output things:

io.service('ioService', function () {
    var dataStore = {};

    return {
        pushData: function (key, value) {
            dataStore[key] = value;
        },
        getData: function (key) {
            return dataStore[key];
        }
    };
});

Later I want to store the dataStore variable with JSON in a file as object.

Now i have an iframe in my aplication to display some content with tabs, you could call it something like a browser.

To give the ability to make some settings, I wanted to do it in one iframe. In order to save the data to a file, I need to call the IO_Service, which is in the parent application

In my iframe I have a module:

var settings = angular.module("settings", []);

with a controller

settings.controller("MyController", function ($scope) { ... }

So I need to declare a dependency for the parent module to use the ioService in order to call the pushData function.

Does anyone have some tips for me to realize this?

Answer 1

Everything DoctorMick says here is correct and must be done in order to access the service at all in your controller.

Additionally, you have to address the fact that the parent and iframe don't share any Javascript context:

The Same-Domain Answer

In your module, dataStore needs to be either window.dataStore or window.parent.dataStore (or possibly window.top.datastore) depending on if the module has been loaded into an iframe or as the main page:

io.service('ioService', function () {
    var inIframe = (window.parent !== window); // or (window.top !== window);

    // If we are in the iframe, we want to use the parent's dataStore,
    // If we are not in the iframe, we are the parent, so use ours.
    var dataStore = inIframe ? window.parent.dataStore : window.dataStore;

    dataStore = dataStore || {};

    return {
        pushData: function (key, value) {
            dataStore[key] = value;
        },
        getData: function (key) {
            return dataStore[key];
        }
    };
});

Or something to that effect. Basically, figure out if you're being loaded in the iframe or parent and either attach to your own (as parent) dataStore or the parent's dataStore.

The Cross-Domain Answer

The main frame and the iframe are totally independent - they might as well (almost) be two different browser tabs - so they don't share anything from a Javascript data perspective. Without using some type of iframe communication library or using an api (via WebSockets, maybe?) to back it up, you're not going to be able to get the two frames to communicate.

If you reconsider your problem as being two distinct applications - the 'browser container' and a collection of 'browsers' - and look for an appropriate application-to-application communication, that might help.

More concretely, assuming you want a client-side solution, your pushData(key, value) and getData(key) methods in the ioService just need to wrap a communication mechanism built using either the native Window.postMessage API or a library like postmessage or porthole.