javascript - 通过服务在 Controller 之间共享 $http 对象

Question

我的应用有两个 Controller ，一个从数据库获取数据，另一个 Controller 使用相同的数据绘制图表。

我想在两个 Controller 之间共享结果，以免运行查询两次。我为此创建了一个服务，但第二个 Controller 没有获取结果集对象。如果我执行 console.log 我会得到一个空对象。如果我等待 5 秒并执行 console.log 我会得到结果对象。我认为当第二个 Controller 触发时，结果似乎还没有准备好。

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

我的服务

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

第一个获得结果的 Controller

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) {

        });
});

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

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

    console.log(chartData.getResult());

});

谢谢

Answer 1

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

其次，您可以在此处使用 Promise，因此 getResults 将返回一个 Promise，该 Promise 在获取结果时将得到满足。

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

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

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

            return getResultsPromise;
        }
    }
});

然后，在您的 Controller 中:

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