如何在多个控制器中使用相同的数据

Question

这是重点：我正在为Web应用程序构建图表。我从Java的Web服务中从单个对象中获取图表的信息。这基本上是我要检索的JSON对象的格式

{ "chart1Info": [9, 42, 43, 7, 20], "chart2Info": [45, 3, 21, 34] (...and so on)}

和我的 app.js (在我的angularjs代码中(，我有7个用于7个图表的控制器。在中，每个控制器我正在调用该服务以获取所有信息。

app.controller('chart1', function($scope, $http){
    $http.get('//WEBSERVICE_PATH').then(function(response) {
        $scope.chartData = response.data; //The JSON object
        //Then I build the charts...    
    });
});

我想做的就是仅调用服务1次并保存对象，以便我的控制器可以使用它，因为它是每个对象的相同对象。我尝试使用一个主控制器设想所有其他控制器，并将$ rootscope的属性设置为JSON对象，例如

$rootScope.chartData = response.data;
//Inside the $http.get() function

，但在其他控制器中未定义。感谢您的答案

Answer 1

您需要在控制器中添加$ rootscope依赖项，否则$ Rootscope无法正常工作。

app.controller('chart1', function($scope, $http,$rootScope){
    $http.get('//WEBSERVICE_PATH').then(function(response) {
        $scope.chartData = response.data; //The JSON object
        //Then I build the charts...    
    });
});

Answer 2

您应该实施出厂服务，仅在尚未检索数据的情况下才会加载数据。

在此处检查https://docs.angularjs.org/guide/services

然后可以在所需的控制器上共享工厂作为依赖项。

Answer 3

//使用localstorage

尝试这个。

app.controller('chart1', function($scope, $http){
    $http.get('//WEBSERVICE_PATH').then(function(response) {
        localStorage.chartData = response.data; //The JSON object
        $scope.chartData = localStorage.chartData;
        //Then I build the charts...    
    });
});

然后您可以在任何控制器中调用。像这样

 app.controller('chart2', function($scope){
      $scope.chartData = localStorage.chartData;
  });

Answer 4

尝试实现出厂服务，并仅在该变量没有值时将该值放在变量和获取值中。

否则实现父控制器并将其拨打API并将其存储到变量中，然后将该数据调用在所有子控制器中

Answer 5

您可能想做的是创建一个角度服务来加载数据，然后使用Angular事件系统与图表控制器通信数据读数的事件完成，以便控制器可以查询该服务以显示要显示的新数据。

通过Rootscope传达数据不是一个好习惯。