javascript - 父模块作为依赖

Question

我的应用程序有一个 Angular 模块:

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

该模块还有一个Service来实现输入/输出的东西:

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

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

稍后我想将带有 JSON 的 dataStore 变量作为对象存储在文件中。

现在我的应用程序中有一个 iframe 来显示带有选项卡的一些内容，您可以将其称为浏览器。

为了能够进行一些设置，我想在一个 iframe 中完成。为了将数据保存到文件中，我需要调用父应用程序中的 IO_Service

在我的 iframe 中我有一个模块:

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

有一个 Controller

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

所以我需要为父模块声明依赖项以使用 ioService 以调用 pushData 函数。

有人能给我一些提示吗？

Answer 1

一切 DoctorMick says here是正确的，必须完成才能在您的 Controller 中访问该服务。

此外，您必须解决父级和 iframe 不共享任何 Javascript 上下文的事实:

同域答案

在您的模块中，dataStore 需要是 window.dataStore 或 window.parent.dataStore(或者可能是 window. top.datastore) 取决于模块是否已加载到 iframe 或作为主页:

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];
        }
    };
});

或者类似的东西。基本上，弄清楚您是在 iframe 还是父级中加载，并附加到您自己的(作为父级)dataStore 或父级的 dataStore。

跨域答案

主框架和 iframe 是完全独立的 - 它们可能(几乎)是两个不同的浏览器选项卡 - 因此从 Javascript 数据的 Angular 来看它们不会共享任何内容。如果不使用某种类型的 iframe 通信库或使用 api(也许是通过 WebSockets？)对其进行备份，您将无法让两个框架进行通信。

如果您将问题重新考虑为两个不同的应用程序 - “浏览器容器”和“浏览器”集合 - 并寻找适当的应用程序到应用程序通信，这可能会有所帮助。

更具体地说，假设您想要一个客户端解决方案， 中的 pushData(key, value) 和 getData(key) 方法ioService 只需要包装一个使用 native 构建的通信机制 Window.postMessage API或类似 postmessage 的图书馆或 porthole .