How to update list after submitting form in Angular with a service?

Question

I'm new to Angular and I'm trying to setup a basic "submit comment" & "show list of comments" page. I would like to have the list of comments be updated after submitting a comment. Currently I can submit, but must manually refresh the page to see it.

Controllers:

app.controller('FormController', function($scope, CommentService) {
    $scope.comment = {}; //will be populated by basic form
    $scope.submit = function() {
        return CommentService.post($scope.comment).then(function(){
            $scope.comment = ""; //blanks out form on POST
        });
    }
});

app.controller('CommentsController' function($scope, CommentService) {
    CommentService.list().then(function(comments){
        $scope.comments = comments.data;
    });
});

Service:

app.service('CommentService', function($http) {
    this.post = function(comment) {
        return $http.post('/api/v1/comments/', comment);
    };

    this.list = function() {
        return $http.get('/api/v1/comments/').
            success(function(data) {
                return data;
            });
    };

    //How do I connect the two controllers?
});

The HTML form/list is super generic, I just use "ng-repeat" to display comments. Am I on the right track here? Is there something simple I can do so when a comment is submitted via form, the list of comments will be updated?

Thanks in advance!

Check this out: http://stackoverflow.com/questions/9293423/can-one-controller-call-another-in-angularjs — welbornio, Apr 17 '14 at 21:31

welbornio · Accepted Answer · 2014-04-17T22:08:07.643

Something along these lines would probably do it, just edit the semantics to match your program.

In your controller:

var getList = function() {
    $scope.comments = CommentService.list();
};

CommentService.registerObserverCallback(getList);

And in your service:

var observerCallbacks = [];

// register the observer's callback in our callback list.
this.registerObserverCallback = function(callback){
  observerCallbacks.push(callback);
};

// function to notify our observers and call the callback they registered with
var notifyObservers = function(){
  angular.forEach(observerCallbacks, function(callback){
   callback();
 });
};

this.post = function(comment) {

    return $http.post('/api/v1/comments/', comment).success(function(data, status, headers, config) {
        notifyObservers();
    })
 };

So basically your controller tells your service, "hey, I'm observing you.. If you do anything, call this call back function", and passes it getList. The service registers the observer, and calls the callback after the post() returns successful.

Thanks! I was able to get this to work. I looked at your other link and it seems like the "cleanest" way to use $rootScope to broadcast (but perhaps dangerous)? Passing callbacks around seems weird. — WBC, Apr 17 '14 at 22:28
Glad it worked! I've found that the observer method is usually the preferred way, but that's definitely an option to consider. Good hunting! — welbornio, Apr 17 '14 at 22:56

How to update list after submitting form in Angular with a service?

1 Answers1