Question

我的应用有两个控制器，一个从数据库中提取数据，另一个控制器使用相同的数据绘制图表。

我想在两个控制器之间共享结果，以便不运行查询两次。我为此创建了一个服务，但第二个控制器没有得到结果集对象。如果我做一个console.log我得到并清空对象。如果我等待5秒并执行console.log，我会得到结果对象。我想当第二个控制器发射时，结果似乎没有准备好。

如何在两个控制器之间正确传输结果对象？

我的服务

app.service('chartData', function(){
    var qryResult = {};
    var addResult = function(newResult) {
        qryResult = newResult;
    };
    var getResult = function() {
        return qryResult;
    };
    return {
        addResult: addResult,
        getResult: getResult
    };
});

第一个获得结果的控制器

app.controller('resultsController', function($http, $scope, chartData){
    $http.get('getresults.php').
        success(function(data, status, headers, config) {

            $scope.resultsList = data;
            chartData.addResult(data);
            console.log(chartData.getResult());
        }).
        error(function(data, status, headers, config) {

        });
});

绘制当前获取空对象的图表的第二个控制器

app.controller('chrtCtrl', function($scope, chartData){

    console.log(chartData.getResult());

});

谢谢

Answer 1

因此，首先，由于您已经在使用服务，请让服务检索数据，而不是控制器获取数据并将其传递给服务。

其次，你可以在这里使用promises，因此getResults会返回一个在获取结果时会实现的promise。

app.factory("chartData", function($http){
    var getResultsPromise = null;

    return {
        getResults: function(){
            if (getResultsPromise) return getResultsPromise;

            getResultsPromise = $http.get('getresults.php');

            return getResultsPromise;
        }
    }
});

然后，在您的控制器中：

app.controller('resultsController', function($scope, chartData){
    chartData.getResults()
        .then(function(data){
            $scope.resultsList = data;
        });
});

app.controller('chrtCtrl', function($scope, chartData){

    chartData.getResult()
        .then(function(data){
            console.log(data);
        });

});

编辑：这里是plunker

Answer 2

您可以将get函数设置为在完成检索数据后进行广播，然后将第二个控制器设置为侦听广播，然后从服务中读取数据。

<强>服务

app.service('chartData', function(){
    var qryResult = {};
    var addResult = function(newResult) {
        qryResult = newResult;
    };
    var getResult = function() {
        return qryResult;
    };
    return {
        addResult: addResult,
        getResult: getResult
    };
});

第一个获得结果的控制器

app.controller('resultsController', function($http, $scope, $rootScope, chartData){
    $http.get('getresults.php').
        success(function(data, status, headers, config) {

            $scope.resultsList = data;
            chartData.addResult(data);
            $rootScope.$broadcast('data-loaded');
            console.log(chartData.getResult());
        }).
        error(function(data, status, headers, config) {

        });
});

绘制当前获取空对象的图表的第二个控制器

app.controller('chrtCtrl', function($scope, chartData){

    $scope.$on('data-loaded', function(){
          console.log(chartData.getResult());
    });

});

通过服务在控制器之间共享$ http对象

2 个答案: