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

时间:2016-05-09 20:01:52

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

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

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

的index.html - indexController.js 的login.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的另一个实例

2 个答案:

答案 0 :(得分:1)

你是对的,不同的html页面上的两个角度应用程序之间不会共享该服务。您需要在内存以外的其他位置保留要共享的数据,例如localStorage或远程服务器。 https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

答案 1 :(得分:0)

只是玩了一下。您可以将要在两个应用之间共享的_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;
    },
  }
});

请参阅此plunker:http://plnkr.co/edit/4896aiczBjMiCXazB2Kk?p=preview

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