不同HTML文件中模块之间的AngularJS通信

Question

There are a couple of variables I want to share between two html files and two modules. Firstly, I used the service as follows but it did not work. In vote.js:

var vote = angular.module('vote', []);
vote.service('voteParam', function () {
this.candidates = [];
this.show_result;
this.vote_begin;
this.elec_begin;
this.setValue = function (voteParam) {
    this.department = voteParam.department;
    this.group = voteParam.group;
    this.type = voteParam.type;
    this.round = voteParam.round;
    this.times = voteParam.times;
    this.advance_num = voteParam.advance_num;
 }
});

In vote-setting.js:

angular.module('admin')
.controller('vote_setting', function ($scope, $http, voteParam) {
 $scope.begin_vote = function () {
        init();
        startit();
        $scope.vote_begin = true;
        $scope.elec_begin = true;
        voteParam.vote_begin = true;
        voteParam.elec_begin = true;
        voteParam.show_result = false;
        voteParam.setValue($scope.voteParam);
        if (voteParam.candidates.length == 0) {
            $scope.get_candidate();
        }
    };
}

When the value is set as true in vote-setting.js, it is showed as undefined in vote.js. I think it's because when I import vote-setting.js in vote-setting.html, variables in the service are initialized again. Is there any other way I can make this work?

The service worked. But the value of variables in it get initialized when the js file is imported again. This is the key of this problem. Thanks

Answer 1

Implement your shared data service as a factory.

Implement proper getter and setters.

Encapsulate your variables and only expose the getter, setters.

Example of shared data service (can also be used as a shared Model)

app.factory('voteParam', function() {
  var param1;
  var param2;
  var param3;

  return {
    setParam1: function(value){
      param1 = value;
    },
    getParam1: function(){
      return param1;
    },
    setParam2: function(value){
      param2 = value;
    },
    getParam2: function(){
      return param2;
    },
    setParam3: function(value){
      param3 = value;
    },
    getParam3: function(){
      return param3;
    }
  }
});

In an application this factory should be initialized once only.

If you are using 2 different angular applications (in your case 'vote' and 'admin') then use local storage or session storage to share data between them

Answer 2

You might want to know the following:

Generally,an angular app should have only one base module. This is the module which you add to your html using ng-app directive. So your html content will know about only one angular app.

You can however create as many other modules as you would like or need. These can be custom modules as in your case, or these can be third party library (modules written by other developers for your ready use.). In any of the above case you need to add extra modules to your base module as dependencies as shown below:

angular.module('baseModule', ['extraModule1, extraModule2]);

Once you are done with this, any component like any directive , service , factory written in any of the extra modules shall be available to you for use, as if they were all written in your baseModule .

Having said this and coming to your question, the code provided by you doesn't seem sufficient to entirely diagnose your issue. However from whatever I get, I suggest you to add vote module to admin module or vice-versa. If you have any other module as a base module, you need to add both vote and admin as dependencies to that module.

Hope this helps you to start fixing the issue. Let me know if any thing seems unclear yet.