将数据从列表视图传递到angular.js中的详细视图

时间:2012-10-23 15:41:45

标签: angularjs

我有一个典型的CRUD应用程序,它有单独的路径和控制器用于列表视图以及详细视图。

使用$resource检索列表的数据。

目前在我的详细视图控制器中,我使用$resource从服务器获取项目,这会产生额外的http请求。

相反,因为在我的列表控制器中我已经有了我正在编辑的项目,所以我想将这个项目从列表控制器传递给细节控制器。

但我不知道怎么做。我可以为两个视图制作一个控制器,但这似乎不对。

请帮忙。

1 个答案:

答案 0 :(得分:4)

您可以使用服务在控制器之间共享数据:

例如:https://groups.google.com/d/msg/angular/IjKY_CRyRno/kP0M_LTzOTkJ

或者我前段时间写过的小提琴:http://jsfiddle.net/XqDxG/169/

myModule.factory('mySharedService', function($rootScope) {
    var sharedService = {};
    sharedService.data = {};
    sharedService.data.message = '';

    return sharedService;
});

function ControllerZero($scope, sharedService) {
    // expose service data to angular scope
    $scope.sharedData = sharedService.data;

    $scope.handleClick = function(msg) {
        sharedService.data.message = msg;            
    };

    $scope.$watch('sharedData.message', function(msg) {
        $scope.message = msg;
    });
}

function ControllerOne($scope, sharedService) {
    $scope.sharedData = sharedService.data;

    $scope.$watch('sharedData.message', function() {
        $scope.message = 'ONE: ' + sharedService.data.message;
    });
}