combining scope from two controllers

Question

I have two controllers/views, one called member.js which is for displaying a list of members projects:

   .controller( 'MemberCtrl', function MemberCtrl( $scope,ProjectsService ) {
        $scope.projects = [];
        $scope.refresh = function() {
            ProjectsService.query()
                .then(function (data) {
                    $scope.projects = data;
                });
        };
        $scope.refresh();
    })

    .factory('ProjectsService', ['$http', '$q', function($http, $q) {
        return {
            query: function() {
                var deferred = $q.defer();
                $http.get('/api/get-projects')
                    .success(function(data) {
                        deferred.resolve(data);
                    })
                    .error(function(data) {
                        deferred.reject(data);
                    });

                return deferred.promise;
            }
        };
    }])

The next controller is in add.js and handles creating a new project:

.controller( 'AddprojectCtrl', function AddprojectCtrl( $http,$scope,Session,$location ) {
    $scope.addProject = function(project){
        return $http
            .post('/api/create-project', project)
            .then(function (result) {
                $location.path("/member");
            });

    };

})

The issue I have is that once i've added in the new project, $scope.projects on the MemberCtrl is out of date and doesn't show the newly added item. I guess I could use one controller for both actions but was wondering if this is the best approach or what the "anggular" way is?

score 0 · Accepted Answer · answered Sep 18 '14 at 18:51

0

Your AddprojectCtrl should not be a controller, rather it should be a factory

.factory( 'AddprojectCtrl', function AddprojectCtrl( $http,$location ) {
        return {
            addProject:function(project) {
              $http.post('/api/create-project', project)
                //Ideally this can be done inside the controller itself
                .then(function (result) {
                   $location.path("/member");
              }
        }
})

And then you need to inject the factory inside the controller. In the controller then you can call the addProject function of the factory. Thats the angular way :)

answered Sep 18 '14 at 18:51

V31

7,626
3
26
44

Thanks, could you let me know why this should be factory? Could something like $on or $broadcast be used instead? – Ian P Sep 19 '14 at 09:48
$on $broadcast are functions which lets the other controllers to know that something has changed and the other controller needs to work according to that. However @IanP in your case you are making a $http post to your server to transmit project data. Hence over here since your converation is with the server (and not another controller) factory is suited over here – V31 Sep 19 '14 at 10:21
the main question should be why a factory over service. Here is some resources that can help you regarding the same http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory/15666049#15666049 – V31 Sep 19 '14 at 10:23
1

Thanks for taking the time to clarify @V31 – Ian P Sep 19 '14 at 10:40

combining scope from two controllers

1 Answers1