Angular - update controller data from another controller

Question

I'm just starting to use AngularJS.

I have a simple CRUD app which communicates to REST api. I have two controllers which control my Projects data and Tasks data respectfully. On the backend Tasks are liked by foreign key to the parent Project. So when I delete a Project the associated Tasks are also deleted (this is the functionality I want right now).

So everything works except that when I delete a Project I want to reload the Tasks list. Basically after ConcernService.del('projects/', item) is called I want the Tasks list to be refreshed from the API. I know this should be handled via the ConcernsService, but I'm not sure of the best way.

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

really need call to API to reload all data each time? How about working with local arrays and splicing/pushing after delete/add/update request made? Fairly easy to implement — charlietfl
– charlietfl, Commented Nov 14, 2013 at 20:20
My concern there is that the array may become out of sync with what is actually happening in the db. For example if I delete the item from the array but it doesn't actually get deleted in the db. Is this an issue I should be concerned with? — Darwin Tech
– Darwin Tech, Commented Nov 14, 2013 at 20:28
also, I am building this app and learning. I would like to know how to answer my question, even if I re-factor to use in-memory data models in the future. — Darwin Tech
– Darwin Tech, Commented Nov 14, 2013 at 20:30
do it in success of request to db. Up to you. If get more subsets means more db calls. Personally since appears you have full task list, and not loading tasks by specific project could merge local data so tasks are already children of projects in main project array. Removing project from local data would also remove it's chidren — charlietfl
– charlietfl, Commented Nov 14, 2013 at 20:31
Yes, I see the logic in that approach. As I say, though, I do not need much complexity at the moment and I'm happy with the api calls. If I treat an array as my projects/models I run the risk of users interacting with stale data. So, I would like to keep it simple for now, which would mean an extra API call on delete. Any suggestions on how to solve my original question? — Darwin Tech
– Darwin Tech, Commented Nov 14, 2013 at 20:37

Galdo · Accepted Answer · 2013-11-14 21:22:29Z

1

Instead of a generic service, you could have a service that is more specific to your project and that service could contains the model (projects and tasks). When it would update internally, the watchers from each controller would trigger and update their data.

When you want to share the model between controllers, the model should be kept in a service and you should use getter and setter to access it.

This acticle use an older version of Angular, but it will explain you how to use the service as your model.

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

answered Nov 14, 2013 at 21:22

Galdo

9451 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - update controller data from another controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related