Совместное использование объекта $ http между контроллерами через службу

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

Итак, прежде всего, поскольку вы уже пользуетесь службой, попросите службу получить данные вместо того, чтобы контроллер получал данные и передавал их службе.

Во-вторых, вы можете использовать обещания здесь, поэтому getResults вернет обещание, которое будет выполнено, когда будут получены результаты.

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); 
     }); 

}); 

EDIT: вот plunker

Answer 2

Вы можете настроить функцию получения, чтобы выполнить трансляцию, когда она закончила получение данных, а затем установить второй контроллер для прослушивания широковещательной передачи, а затем прочитать данные из службы.

сервис

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()); 
    }); 

});