如何在AngularJS控制器之间正确共享数据？

请容忍我。我是个新手，事实上只有一天左右的时间，但大部分时间对我来说都是有意义的。我已经创建了控制器、路由等，但是把它们放在一起我有点迷路了

我的问题

我有一个带有

ng view

的页面，根据路线的不同，使用不同的数据和模板调用不同的控制器。目前，我有一个“列表”页面和一个通过ID路由的“详细信息”页面，但我需要这两个页面上的列表

我读过关于使用工厂并将数据一个传递给另一个的文章，但这是正确的方法吗

plopApp.controller('juryCtrl', function($scope, $http) {
$http.get('/assets/javascripts/plop/plop/plopies.json').success(function(data) {
    $scope.plopies = data;
});
});

plopApp.controller('plopDetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    $http.get('/assets/javascripts/plop/plop/' + $routeParams._id + '.json').success(function(data) {
    $scope.plopor = data;
});
}]);

在详细信息页面上，我希望列表也能输出。我是否使用工厂进行此操作，或者我是否错误地构建了模板

更新

我马上就到了——我现在已经了解了工厂/服务的基本情况，看了一两个视频，但仍停留在细节页面的执行上

这是我在我的应用程序中工作的工厂

juryApp.factory('juryListFactory', function ( $http ) {
return {
    list: function() {
        return $http.get('/assets/javascripts/jury/jury/juries.json')
        .then(
            function(result) {
                return result.data;
        });
    }
};
});

现在我正在尝试转换此控制器的内部：

 juryApp.controller('juryDetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    $http.get('/assets/javascripts/jury/jury/' + $routeParams._id + '.json').success(function(data) {
    $scope.juror = data;
});
 }]);

.controller('myController', ['$scope', 'myFactory',
    function($scope, myFactory) {
        myFactory.list().then(
        function(data){
            $scope.myData = data;
        });
}]);

.controller('myController2', ['$scope', 'myFactory2',
    function($scope, myFactory2) {
        myFactory2.list().then(
        function(data){
            $scope.myData = data;
        });
}]);

去工厂。。目前我写了这篇文章，但似乎不起作用

 juryApp.factory('juryListDetailFactory', '$routeParams', function($http, $routeParam){
var factory = {};
factory.getList = function(list, callback){
    $http.get('/assets/javascripts/jury/jury/' + $routeParams._id + '.json').
    success(function(data){                      
        callback(data)
    }).error(function(){
        /*handle errors however you want */
        callback(false);  
    })};
return factory;
}

我得到这个错误 错误：[ng:areq]参数'juryDetailCtrl'不是函数，未定义

---

非常感谢juryDetailCtrl提供的任何帮助

我个人会使用工厂

差不多

    app.factory('listFactory', function($http){
        var factory = {};

        factory.getList = function(list, callback){
            $http.get('/assets/javascripts/plop/plop/'+list+'.json').
            success(function(data){                      
                callback(data)
            }).error(function(){
                /*handle errors however you want */
                callback(false);  
            })};

        return factory;

    }

然后在控制器中像这样使用它

    listFactory.getList($routeParams._id, function(list){
         if(list !== false){
              $scope.plopor = list;
         }
    })

或

---

要在两个控制器之间共享数据，您需要使用服务。服务是一个单实例，如果将表存储在控制器中，它将是持久的。

---

参见Angular文档，了解如何创建服务
示例可在此处找到（向下滚动一点）：。

此外，您可能想看看Angular ui路由器，它是一个插件，取代了原来的路由器。 看看例子，你会发现它做了你想要的，还有更多

---

我最近发现了它，希望在深入使用“普通”路由器之前使用过它。

您应该创建一个可以下载数据的服务。此服务应以注入$scope等的方式注入控制器：

yourModule.service('yourService', ['$http', YourServiceFunction]);
yourModule.controller('plopDetailCtrl', ['$scope', '$routeParams', 'yourService', YourPlopDetailCtrlFunc])

---

注入此服务后，您将能够从任何控制器中的服务获取数据。

基本上，服务/工厂是一致的，在调用它们时只加载一次。 控制器不是，当您更改页面时，控制器将重新初始化，因此您无法在其中存储任何内容

---

通过将数据放入服务，然后可以通过控制器将服务/工厂的值绑定到模板。控制器，仅用作链接，不执行任何其他操作（可能要求服务/工厂重新加载或类似操作）。如果需要，您还可以保存一些API调用，只在您还没有数据时调用它。

从结构角度看，如果您从服务或工厂调用$http.get，然后在任何控制器中调用它，例如：

angular.module（'myApp'）

然后从控制器：

 juryApp.controller('juryDetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    $http.get('/assets/javascripts/jury/jury/' + $routeParams._id + '.json').success(function(data) {
    $scope.juror = data;
});
 }]);

.controller('myController', ['$scope', 'myFactory',
    function($scope, myFactory) {
        myFactory.list().then(
        function(data){
            $scope.myData = data;
        });
}]);

.controller('myController2', ['$scope', 'myFactory2',
    function($scope, myFactory2) {
        myFactory2.list().then(
        function(data){
            $scope.myData = data;
        });
}]);

从另一个控制器：

 juryApp.controller('juryDetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    $http.get('/assets/javascripts/jury/jury/' + $routeParams._id + '.json').success(function(data) {
    $scope.juror = data;
});
 }]);

.controller('myController', ['$scope', 'myFactory',
    function($scope, myFactory) {
        myFactory.list().then(
        function(data){
            $scope.myData = data;
        });
}]);

.controller('myController2', ['$scope', 'myFactory2',
    function($scope, myFactory2) {
        myFactory2.list().then(
        function(data){
            $scope.myData = data;
        });
}]);

---

依此类推。

如果我想要两个工厂的数据，这里也可以吗？是的，您可以简单地调用任何其他工厂，如：.controller（'myController2'，['$scope'，'myFactory2'，function（$scope，myFactory）{myFactory.list（）。然后（function（data）{$scope.mydatafromyfactory=data；}）；anotherFactory.list（）.then（函数（数据）{$scope.myDataFromAnotherFactory=data；}）；}]）；抱歉@pixeltooth在这里的评论中看起来没有代码格式！工厂需要创建一个新模块吗？不，您只需要将它链接到主模块，如angular.module（'myApp'）.factory（）{}.controller（）{}等等。。工厂本身没有额外的模块