Question

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

(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')生成两个控制器所需的所有数据，那么听起来你只需要使用缓存：

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

在两个控制器中使用它，你只需要一次点击服务器。

最好将其放置在工厂中，以便数据检索逻辑只在一个地方，但这不是绝对的要求。

Answer 2

我会选择在两个控制器中注入$ rootScope

myApp.controller('controllerA', function($rootScope){
    $rootScope.sharedData = {album: ...};
    ...
});

或者创建一个值并将其注入两个控制器以传递这些数据：

myApp.value('myValues', '{sharedData: {}}');
myApp.controller('controllerA', function(myValues){
    myValues.sharedData.album = ...
    ...
});

这基本上是同一个问题，并且有很好的答案和评论：

Best way to pass data between ngRoute controllers (from one view to the next)

Answer 3

对于这种情况，服务或工厂都可以。您还可以将以前输入的数据存储在本地存储中，例如使用该服务。基本上它是未来改进的更好方式。

作为一种更简单的方法，您只需使用$ rootScope即可。它可以在你想要的所有控制器中使用。

只需将其注入控制器或应用程序本身。

app.controller('myCtrl', function($rootScope){
    $rootScope.myStoredValues = {...};
});

或

app.run(function($rootScope){
    $rootScope.root = $rootScope; 
    $rootScope.myStoredValues = {...};
    // this way you don't need to inject it into controller, 
    // it will be available there via $scope.root.myStoredValues
});

Answer 4

app.factory('ProjectService', function ($http) {
  var projects = []
  return{

    getProjectList: function(){
      $http.get('/get_albums').success(function(albums) {
        projects = albums;
      });
    },

    getProject: function( id ){
      // here you can select the already existing project from the above list "projects" by using the Id passed
    }

  }

});

您可以在控制器中包含此服务，并使用它们获取相册列表和单个相册

AngularJS $ http在多个控制器中使用响应

4 个答案: