Question

我的应用程序有一个角度模块：

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

该模块还有一个服务来实现输入/输出的东西：

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", []);

带控制器

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

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

有没有人有一些提示让我意识到这一点？

Answer 1

所有DoctorMick says here都是正确的，必须完成才能在您的控制器中访问该服务。

此外，您必须解决父和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数据角度共享任何内容。如果不使用某种类型的iframe通信库或使用api（通过WebSockets，可能？）进行备份，您将无法通过两个帧进行通信。

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

更具体地说，假设您需要客户端解决方案，pushData(key, value)中的getData(key)和ioService方法只需要包含使用本机构建的通信机制Window.postMessage API或postmessage或porthole等库。

Answer 2

您只需要知道设置模块是否依赖于IO操作模块，一旦完成，您就可以像使用IO服务一样使用IO服务，如下所示：

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

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

父模块作为依赖项

2 个答案: