应用错误收集

我们可以在AngularJs的两个页面中的两个ng-app之间进行通信吗？

时间：2017-10-02 16:15:20

标签： javascript angularjs

假设有两个html页面。每个html页面都有自己的ng-app。如果我们想将数据从html页面的一个ng-app发送到另一个html页面的另一个ng-app，那么我们如何在两个不同页面的两个ng-app之间进行通信。

我有两个html页面app1.html和app2.html及其自己的ng-app。我处于这样一种状态：我不能使用共享单个ng-app的布局或母版页，并在多个页面之间共享数据。每个html页面都有一个文本框。如果我在每个文本框上写一些内容，那么它应该反映到另一个文本框中。要记住的是，这两个页面在不同的选项卡上运行，我甚至无法使用数据库，会话，cookie来保存数据。而且，我甚至不能使用父/子关系来获取彼此的数据因为如果我使用DOM的父/子关系，则应存在父运行子页面。

1 个答案:

答案 0 :(得分：2)

这是一个非常天真的实现，使用SharedWorker在浏览器上下文中的标签/窗口之间共享数据。请记住，这只能在一个浏览器上下文中工作，因此如果同时打开Firefox 和 Chrome，则不会在选项卡之间复制数据，但会在所有选项卡中复制在Firefox中打开标签或 Chrome。要做到这一点，你必须做一些服务器端。

演示

`index.html`

<!DOCTYPE html>

<html lang="en" ng-app="hvApp">

<head>
    <script src="node_modules/angular/angular.js"></script>
    <script src="src/index.js"></script>
</head>

<body>

    <main ng-controller="hvCtrl as $ctrl">
        <h1>Shared Worker Test</h1>
        <input type="text" ng-model="$ctrl.hvText" ng-change="$ctrl.hvChange()">
    </main>

</body>

</html>

`/src/index.js`

/*jslint browser:true, esversion:6, devel:true*/
/*global angular*/
(function () {
    angular
        .module("hvApp", [])
        .service("hvShared", function ($rootScope) {
            let worker = new SharedWorker("src/shared-worker.js");
            this.notify = function (message) {
                worker.port.postMessage(message);
            };
            worker.port.onmessage = function (message) {
                console.log(`Heard: ${message}`);
                $rootScope.$broadcast("message", message.data);
            };
        })
        .controller("hvCtrl", function ($scope, hvShared) {
            let $ctrl = this;
            $ctrl.hvText = "Hello";

            $scope.$on("message", function (evt, message) {
                $scope.$applyAsync(function () {
                    $ctrl.hvText = message;
                });
            });

            $ctrl.hvChange = function () {
                hvShared.notify($ctrl.hvText);
            };
        });
}());

`/src/shared-worker.js`

/*jslint worker:true, esversion:6, devel:true*/
let connections = [];

self.addEventListener("connect", (e) => {
    let port = e.ports[0];

    connections.push(port);

    port.addEventListener("message", (eMessage) => {
        console.log(eMessage);
        connections.forEach((p) => {
            p.postMessage(eMessage.data);
        });
    });

    port.start();
});