如何在 Angularjs 中的交叉模块之间共享数据

how to share Data between cross modules in angularjs?

本文关键字：模块 之间 共享 数据 Angularjs      更新时间：2023-09-26

我有两个模块，分别是"uploadModule"和"graphModule"，在同一页面中，uploadModule浏览数据并将其保存在服务（sharedDataObject）上，我想将这些数据量共享到另一个模块（graphModule）

var uploadModule = angular.module('uploadModule', ['ngRoute']);
uploadModule.config(function ($routeProvider) {
    $routeProvider
            .when('/',
                    {
                        controller: 'dataSetController',
                        templateUrl: 'view1.html'
                    })
            .when('/view2',
                    {
                        controller: 'compineGraphsWithData',
                        templateUrl: 'view2.html'
                    })
            .otherwise({redirectTo: '/'})
});
uploadModule.service('sharedDataObject', function () {
 
        this.getDataObject= function () {
            return this.dataObject;
        };
        this.setDataObject= function (value) {
            this.dataObject = value;
        };
   
});//this service to share Data Object between controlles(graphs)
uploadModule.controller('dataSetController', dataSetController);//load data set and but it on sharedDataObject service
function dataSetController($scope, sharedDataObject) {
    $scope.datasetfile;
    var file;
    $scope.getDataSetFile = function (files) {
        file = files[0];
        $scope.datasetfile = file.name;
        var reader = new FileReader();
        reader.onload = function (evt) {
            var result = evt.target.result;
            var Json;
            Json = CSV2JSON(result);
            dataset = JSON.parse(Json);
            sharedDataObject.setDataObject(dataset);
            console.log(dataset);
        };
        reader.readAsText(file);
        $scope.$apply();
    };
}
;
var graphModule = angular.module("graphModule", ['uploadModule']);
            graphModule.controller('createGraph', createGraph);
            function createGraph($scope ,sharedDataObject ) {
                $scope.Scatter = function () {
                    console.log(sharedDataObject.getDataobject());
                };
            }
            ;//compineGraphsWithData and fire graph function
 angular.bootstrap(document.getElementById("App2"),['graphModule']);
<input type="file"  id="dataset" name='file' onchange="angular.element(this).scope().getDataSetFile(this.files)" />

函数名称似乎不正确：

console.log(sharedDataObject.getDataobject());

它应该是：

console.log(sharedDataObject.getDataObject());

编辑：我不知道，对我来说一切似乎都很好。Angularjs服务可用于在控制器之间共享数据，即使它们属于不同的模块。由于我不知道您的完整脚本，因此我根据您的示例代码制作了一个示例。是这样的：

    <html><head>
    <style>        
    </style>    
</head>
<body>
<div ng-app="graphModule">
    <div ng-controller="dataSetController">
    <input type="file" id="dataset" name="file" onchange="angular.element(this).scope().getDataSetFile(this.files)">    
    </div>  
    <div ng-controller="createGraph">
    <button ng-click="Scatter()">Click me</button>
    </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
var uploadModule = angular.module('uploadModule', []);
uploadModule.service('sharedDataObject', function () {
  this.getDataObject = function () {
    return this.dataObject;
  };
  this.setDataObject = function (value) {
    this.dataObject = value;
  };
});//this service to share Data Object between controlles(graphs)
uploadModule.controller('dataSetController', dataSetController);//load data set and but it on sharedDataObject service
function dataSetController($scope, sharedDataObject) {
  $scope.datasetfile;
  var file;
  $scope.getDataSetFile = function (files) {
    file = files[0];
    $scope.datasetfile = file.name;
    var reader = new FileReader();
    reader.onload = function (evt) {
      var result = evt.target.result;
      var Json;
      //Json = CSV2JSON(result);
      Json = result;
      //dataset = JSON.parse(Json);
      dataset = Json;
      sharedDataObject.setDataObject(dataset);
      console.log(dataset);
    };
    reader.readAsText(file);
    $scope.$apply();
  };
}
;
var graphModule = angular.module("graphModule", ['uploadModule']);
graphModule.controller('createGraph', createGraph);
function createGraph($scope, sharedDataObject) {
  $scope.Scatter = function () {
    console.log(sharedDataObject.getDataObject());
  };
}
;//compineGraphsWithData and fire graph function
// angular.bootstrap(document.getElementById("App2"),['graphModule']);
    </script>
</body></html>

使用服务在控制器之间共享数据的方式遵循以下模式：http://embed.plnkr.co/ohkXfy/preview

var myApp = angular.module('myApp', []);
myApp.service('sharedModels', [function () {
    'use strict';
    // Shared Models
    this.data = {breakfast: 'eggs'};
}]);
myApp.controller('Ctrl1', ['$scope', 'sharedModels', function($scope, sharedModels) {
    $scope.myBreakfast = sharedModels.data;
}]);
myApp.controller('Ctrl2', ['$scope', 'sharedModels', function($scope, sharedModels) {
    $scope.yourBreakfast = sharedModels.data
}]);
myApp.controller('Ctrl3', ['$scope', 'sharedModels', function($scope, sharedModels) {
    $scope.ourBreakfast = sharedModels.data;
}]);`

您应该将公共状态提取到它自己的模块中，并将其作为依赖项添加到两个模块中。然后，您可以在两个模块中访问相同的共享状态。

编辑：我在Plunker中举了一个例子。

因此，您创建一个模块，其中包含两个模块所需的服务：

(function(){
  angular.module("sharedData", [])
    .service("sharedService", function(){
      this.getSharedData = function(){
        return this.sharedObject;
      };
      this.setSharedData = function(newData){
        this.sharedObject = newData;
      };
    });
}());

然后，使此模块成为需要它的模块的依赖项：

(function(){
  angular.module("firstModule", ["sharedData"])
    .controller("firstCtrl", function($scope, sharedService){
      $scope.get = function(){
        $scope.data = sharedService.getSharedData();
      };
    });
}());
(function(){
  angular.module("secondModule", ["sharedData"])
    .controller("secondCtrl", function($scope, sharedService){
      $scope.set = function(){
        sharedService.setSharedData("Test");
      };
    });
}());

如果您有更多问题，请提前询问。

相关文章：