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) {$scopements = {"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?
        $scopements.push({'comment':'test'}); //Returns error - "TypeError: undefined is not a function"
      });
  };

}]);

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

Thanks.

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.

• javascript
• angularjs
• http-post

2 Answers 2

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.

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.