2014-07-23 8 views
8

Qual è il modo corretto di aggiornare il contenuto dopo una richiesta POST http in Angolare?AngularJS - Refresh after POST

//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> 

Grazie.

risposta

6

Ci sono molti modi per farlo. voglio ancora mostrarti il ​​modo più semplice (in base alle tue esigenze).

indica che è associata una pagina "first.html" e "PropertyDetailsCtrl". Ora, in html è possibile scrivere in questo modo,

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()'. 

al vostro fianco .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 
$scope.initFirst=function() 
{ 


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

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

    $scope.myVariable=data; 

}; 

Ora al momento opportuno (si sa quando) il metodo di seguito viene chiamato.

$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(); 


    }; 

}]); 

Spero che questo possa essere d'aiuto.

+0

Grazie - initFirst() ha funzionato perfettamente. – Matt

+1

benvenuto matt. avanti, avrai molte domande relative ad Angularjs. Sentiti libero di chiedere. – micronyks

5

Non sicuro se esiste UN modo corretto, ma è possibile chiamare $ location.path() in caso di successo.

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

Per visualizzare il commento aggiunto (che a quanto pare è quello che volete), è possibile utilizzare:

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

Il contenuto sarebbe aggiorna automaticamente sulla pagina, se si sta utilizzando espressioni angolari e una ng-repeat.

+2

Penso che OP non chiede un aggiornamento della pagina, solo un commento ricarica. – runTarm

+0

Modificato per riflettere questo. – Goodzilla

+0

Il modo più semplice, grazie mille –