在两个不同的 ng-app 中的控制器之间共享数据不能通过共享服务工作答案

【问题标题】：sharing data between controllers in two different ng-app not working via shared service在两个不同的 ng-app 中的控制器之间共享数据不能通过共享服务工作
【发布时间】：2016-09-04 14:27:05
【问题描述】：

所以我有两个不同的 html 页面、两个不同的 ng-apps 和两个控制器。我正在尝试在控制器和不同模块之间共享数据。

下面是应用程序的基本结构

index.html - indexController.js 登录.html - loginController.js

sharedService.js

angular.module('sharedService', []).service('SharedService', function() {

var SharedService;

SharedService = (function() {

    function SharedService() {
        console.log('initializing');
    }

    var _data;
    SharedService.prototype.setData = function( data) {
        _data = data;
        /* method code... */
    };
    SharedService.prototype.getData = function( ) {
        return _data ;
    };
    return SharedService;

})();

if (typeof(window.angularSharedService) === 'undefined' || window.angularSharedService === null) {
    window.angularSharedService = new SharedService();
}
return window.angularSharedService;});


 angular.module("loginApp", ['sharedService'])
controller("loginCtrl",[
    'SharedService', function(SharedService){
    SharedService.setData(data);
    }

  angular.module("mainApp", ['sharedService'])
controller("someCtrl",[
    'SharedService', function(SharedService){
    console.log(SharedService.getData());
    }

问题是因为应用程序不同，我引用的是

<script src="sharedService.js"></script>

服务被初始化两次。当我从 loginApp 设置数据时设置数据，但是当我从 mainApp 查询数据时，它检索未定义，我怀疑这是因为服务再次初始化并且是 sharedService 的不同实例

【问题讨论】：

为什么要将服务实例放到window 对象上？为什么要将服务中的功能包装到 IIFE 中？在这种情况下，我会使用工厂，只需将共享值存储在工厂的对象中，并让一些工厂方法返回或写入值。

标签： javascript angularjs angularjs-scope angularjs-service angularjs-factory

【解决方案1】：

您是对的，该服务不会在不同 html 页面上的两个 Angular 应用程序之间共享。您需要将要共享的数据保存在内存以外的某个地方，例如本地存储或远程服务器。 https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

【讨论】：

【解决方案2】：

只是玩了一下。您可以将要在两个应用程序之间共享的_data 放到window 对象上。像这样

angular.module('serv', [])
.factory('MyFactory', function () {
  window._data = 'default';
  return {
    setData: function (val) {
      console.log('setData() called with val == ', val);
      window._data = val;
    },
    getData: function () {
      return window._data;
    },
  }
});

查看此插件：http://plnkr.co/edit/4896aiczBjMiCXazB2Kk?p=preview

虽然这看起来有些难看。可能至少要为其命名。

【讨论】：

似乎只需要采用这种方法