AngularJS $http 在多个 Controller 中使用响应

Question

我有一个应用程序，我在其中加载一堆专辑，然后当用户单击每个专辑时，他们会获得专辑的详细信息，例如歌曲等。现在我正在从数据库中提取数据，但做了两次, 一次在 ProjectsCtrl 中显示所有专辑，然后再次在 ProjectsDetailCtrl 中显示单个专辑信息。我觉得有一种更快的方法可以做到这一点，但无法弄清楚如何从第一次保存数据以再次在第二个 Controller 中使用

(function() {
    var app = angular.module('chp', ['ngRoute', 'projectControllers']);

    app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'partials/directory.html',
            controller: 'ProjectsCtrl'
          }).
          when('/album/:slug', {
            templateUrl: 'partials/album.html',
            controller: 'ProjectDetailCtrl'
          }).
          otherwise({
            redirectTo: '/'
          });
      }]);

    var projectControllers = angular.module('projectControllers', []);

    projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
      function ($scope, $http) {
        $http.get('/get_albums').success(function(albums) {
            $scope.projects = albums;
            $scope.filters = { };
        });
      }]);



    projectControllers.controller('ProjectDetailCtrl', ['$scope', '$http', '$routeParams', '$sce',
      function($scope, $http, $routeParams, $sce) {


        $http.get('/get_albums').success(function(albums) {
            $scope.projects = albums;

            for(var i = 0; i < $scope.projects.length; i++) {
                if($scope.projects[i].slug === $routeParams.slug){
                    $scope.album = $scope.projects[i];
                    $scope.albumIdx = i;
                    break;
                }
            }    

            $scope.project = albums[$scope.albumIdx];

            $scope.showVideo = function(id) {
                var videoCode = $(this)[0].song.video;
                // videoCode = '<iframe width="560" height="315" src="'+video+'" frameborder="0" allowfullscreen></iframe>';
                $('#myModal .flex-video').html(videoCode);
                $('#myModal .track-number').html('<span style="color: #f86081; display: inline-block; margin-right: 4px;">' + ($(this)[0].$index+1) + '.</span> ' + $(this)[0].song.title);
                $('#myModal').foundation('reveal', 'open');
            }

        });

    }]);
})();

Answer 1

如 $http.get('/get_albums')生成两个 Controller 所需的所有数据，然后听起来您只需要使用缓存:

$http.get('/get_albums', { cache: true })....

在两个 Controller 中使用它，您只会访问服务器一次。

最好将其放置在工厂中，以便数据检索逻辑仅位于一处，但这不是绝对要求。