AngularJS - Refresh after POST

Question

What is the correct way to refresh content after a http POST request in Angular?

//controller.js
var hudControllers = angular.module('hudControllers', []);

hudControllers.controller('PropertyDetailsCtrl', 
  ['$scope','$window','$http', function ($scope,$window,$http) {

   //I want to reload this once the newCommentForm below has been submitted
   $http.get('/api/comments')
    .success(function(data) {$scope.comments = {"data":data};}})
    .error(function(data) {...);

   $scope.newCommentForm = function(){

      newComment=$scope.newComment;
      requestUrl='/api/comments';
      var request = $http({method: "post",url: requestUrl,data: {...}});
      request.success(function(){
        //How do I refresh/reload the comments?
        $scope.comments.push({'comment':'test'}); //Returns error - "TypeError: undefined is not a function"
      });
  };

}]);

//template.ejs
<div class="comment">
  <ul>
     <li ng-repeat="comment in comments.data">{{comment.comment}}</li>
 </ul>
</div>

Thanks.

micronyks · Accepted Answer · 2014-07-23 16:25:19Z

There are many ways you can do it. still I want to show you simplest way (according to your needs).

lets say you have 'first.html' page and 'PropertyDetailsCtrl' is associated with it. Now, in html you can write like this,

 with very first-div 
 <div ng-controller="PropertyDetailsCtrl" ng-init="initFirst()"> 
.... Your page contents...
</div>   (This will initialize your controller and you will have execution of your first method 'initFirst()'.

at your .js side....

var hudControllers = angular.module('hudControllers', []);

hudControllers.controller('PropertyDetailsCtrl', 
  ['$scope','$window','$http', function ($scope,$window,$http) {

   //I want to reload this once the newCommentForm below has been submitted
$scope.initFirst=function()
{


   $http.get('/api/comments')
    .success(function(data) {...})
    .error(function(data) {...);

        //You need to define your required $scope.....

     $scope.myVariable=data;

 };

Now at appropriate time (You know when) your below method gets called.

   $scope.newCommentForm = function(){

      newComment=$scope.newComment;
      requestUrl='/api/comments';
      var request = $http({method: "post",url: requestUrl,data: {...}});
      request.success(function(data){
        //How do I refresh/reload the comments?
             //without calling anything else, you can update your $scope.myVariable here directly like this


       $scope.myVariable=data


      });

      //or else you can call 'initFirst()' method whenever and wherever needed like this,

    $scope.initFirst();


  };

}]);

I hope this will help.

welcome matt. ahead, you'll have many queries related to Angularjs. Feel free to ask.

Goodzilla · Accepted Answer · 2014-07-23 16:07:29Z

5

Not sure if there is ONE correct way, but you can call $location.path() on success.

request.success(function(){
    $location.path('your path');
});

To view the added comment (which apparently is what you want), you could use :

request.success(function(response){
    $scope.comments.push(response.data);
});

Your content would refresh automatically on the page, if you're using angular expressions and a ng-repeat.

answered Jul 23, 2014 at 16:07

Goodzilla

1,48311 silver badges17 bronze badges

2 Comments

runTarm Over a year ago

I think OP doesn't ask for a page refresh, just a comment reload.

Goodzilla Over a year ago

Edited to reflect that.

Collectives™ on Stack Overflow

AngularJS - Refresh after POST

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related