Question

请耐心等待。我对Angular很新 - 事实上只有一天左右 - 但大部分都对我有意义。我已经创建了控制器，路线等，但把它放在一起我有点迷失。

我的问题

我有一个ng-view的页面，根据路径，使用不同的数据和模板调用不同的控制器。目前我有一个＆＃34;列表＆＃34;页面和＆＃34;详细信息＆＃34;通过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;
});
 }]);

到工厂..目前我写了这个，但它似乎没有工作

 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] Argument＆＃39; juryDetailCtrl＆＃39;不是一个功能，未定义

Anyriep with juryDetailCtrl将非常感激

Answer 1

我个人会使用工厂，

类似

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

或

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

Answer 2

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

有关如何创建服务的信息，请参阅Angular文档。可以在此处找到示例（向下滚动一下）：https://docs.angularjs.org/tutorial/step_11。

Answer 3

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

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

您可以通过注入此服务在任何控制器中获取服务数据。

Answer 4

从结构方面来说会更好，如果你从服务或工厂进行$ http.get调用，然后在任何控制器中调用它，如：

angular.module（＆＃39;对myApp＆＃39）

.factory('myFactory', function ($http) {
    return {
        list: function() {
            return $http.get('/myURL/list').then(
                    function(result) {
                        return result.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;
        });
}]);

依旧......

Answer 5

另外，您可能需要查看angular-ui-router，它是一个插件，替换原来的路由器。看看这些例子，你会看到它做你想要的，甚至更多！

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

Answer 6

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

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

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

6 个答案: