0

我刚开始使用 AngularJS。

我有一个与 REST api 通信的简单 CRUD 应用程序。我有两个控制器分别控制我的Projects数据和Tasks数据。在后端任务被父项目的外键喜欢。所以当我删除一个Project关联Tasks的也被删除（这是我现在想要的功能）。

所以一切正常，除了当我删除一个项目时我想重新加载任务列表。基本上在ConcernService.del('projects/', item)调用之后我希望从 API 刷新任务列表。我知道这应该通过 处理ConcernsService，但我不确定最好的方法。

// --- CONCERNS FACTORY --- //
concernsApp.factory('ConcernService', function ($http, $q) {
    var api_url = "/path/to/api/";

    var ConcernService = {
        list: function (items_url) {
            var defer = $q.defer();
            $http({method: 'GET', url: api_url + items_url}).
                success(function (data, status, headers, config) {
                    defer.resolve(data);
                }).error(function (data, status, headers, config) {
                    defer.reject(status);
                });
            return defer.promise;
        },
        del: function(item_url, obj) {
            return $http.delete(api_url + item_url + obj.id + '/');
        },
    };
    return ConcernService;
});


// --- PROJECTS CONTROLLER --- //
concernsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) {
    // get all projects
    $scope.projects = ConcernService.list('projects/');

    // assign the delete method to the scope
    $scope.deleteItem = function(item) {
        ConcernService.del('projects/', item).then(function(){
            // reload projects
            $scope.projects = ConcernService.list('projects/');
        });
    };
});


// --- TASKS CONTROLLER --- //
concernsApp.controller('TasksCtrl', function ($scope, $http, ConcernService) {
    // get all tasks
    $scope.tasks = ConcernService.list('tasks/');

    // assign the delete method to the scope
    $scope.deleteItem = function(item) {
        ConcernService.del('tasks/', item).then(function(){
            // reload projects
            $scope.tasks = ConcernService.list('tasks/');
        });
    };
});
4

1 回答 1

1

您可以拥有更特定于您的项目的服务，而不是通用服务，并且该服务可以包含模型（项目和任务）。当它在内部更新时，来自每个控制器的观察者将触发并更新他们的数据。

当你想在控制器之间共享模型时，模型应该保存在一个服务中，你应该使用 getter 和 setter 来访问它。

这篇文章使用的是旧版本的 Angular，但它将向您解释如何使用该服务作为您的模型。

http://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/

于 2013-11-14T21:22:29.693 回答