Angular - 从另一个控制器更新控制器数据

问题描述 投票:0回答:1

我刚刚开始使用AngularJS。

我有一个简单的CRUD应用程序,它与REST api通信。我有两个控制器可以控制我的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/');
        });
    };
});
angularjs angularjs-service
1个回答
1
投票

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

如果要在控制器之间共享模型,则应将模型保留在服务中,并且应使用getter和setter来访问它。

本文使用较早版本的Angular,但它将向您解释如何使用该服务作为您的模型。

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

© www.soinside.com 2019 - 2024. All rights reserved.