AngularJS Aktualisierungsansicht nach Sendekommentar

Question

Ich habe Controller in AngularJS erstellt, um Kommentare zu meinem Ruhepunkt anzuzeigen und zu senden. Wie kann ich die Kommentarliste aktualisieren, nachdem der Benutzer geklickt und einen Kommentar gesendet hat?

Mein Controller:

.controller('CommentController', 
    function($scope, $routeParams, NewsModel){ 

     var newsId = $routeParams.id; 
     path = 'getCommetnsByNewsId/'+newsId; 

     var comm = this; 

     var data = new Date().toLocaleString(); 

     $scope.createComm = function(comment){ 
     NewsModel.createComment(angular.extend({}, 
      {data: data, newsId: newsId}, comment)).then(function (result){ 
      initCreateComm(); 

     }) 
     } 
     function initCreateComm(){ 
     comm.newComm = { comment: '', author: ''}; 
     } 

     NewsModel.getCommentById().then(function (result){ 
     $scope.comments = result.data; 
     console.log($scope.comments); 
     }); 

    }) 

Service:

.service('NewsModel', function($http, ENDPOINT_URI){ 

    var service = this; 

    function getUrl(){ 
     return ENDPOINT_URI + path; 
    } 

    service.all = function(){ 
     return $http.get(getUrl()); 
    } 

    service.getCommentById = function(){ 
     return $http.get(getUrl()); 
    } 

    service.createComment = function(comment){ 
     return $http.post(getUrl(),comment); 
    } 

    }); 

Und HTML:

<!-- Comments Form --> 
    <div class="well"> 
    <h4>Leave comment:</h4> 
    <form role="form" ng-submit="createComm(newComment)"> 
     <div class="form-group"> 
     <input type="text" class="form-control" ng-model="newComment.author" placeholder="Autor"> 
     </div> 
     <div class="form-group"> 
     <textarea class="form-control" ng-model="newComment.comment" rows="3"></textarea> 
     </div> 
     <button type="submit" class="btn btn-primary">Wyślij</button> 
    </form> 
    </div> 

    <hr> 


    <div ng-repeat="comm in comments"> 

    <div class="media"> 

    <div class="media-body"> 
     <h4 class="media-heading">{{comm.author}} 
     <small>{{comm.data}}</small> 
     </h4> 
     {{comm.comment}} 
    </div> 
    </div> 

    </div> 

</div> 

Wie dies zu tun?

Answer 1

Dies ist, wie Sie die Kommentare erhalten:

NewsModel.getCommentById().then(function (result){ 
    $scope.comments = result.data; 
    console.log($scope.comments); 
}); 

So müssen Sie es in einer Funktion wickeln und nennen es einen neuen Kommentar nach dem Hinzufügen:

$scope.getComments = function() { 
    NewsModel.getCommentById().then(function (result){ 
     $scope.comments = result.data; 
     console.log($scope.comments); 
    }); 
}; 
$scope.getComments(); // Init the comments as the controller loades 

und fügen Sie diese am Ende von $scope.createComm = function(comment){:

$scope.createComm = function(comment){ 
    NewsModel.createComment(angular.extend({}, 
     {data: data, newsId: newsId}, comment)).then(function (result){ 
     initCreateComm(); 
     $scope.getComments(); // Update comments 
    }) 
} 

Answer 2

Rufen Sie einfach Ihren Server an, um alle Kommentare abzurufen, wenn Sie die Kommentarliste aktualisieren müssen.

function fetchComments(){ 
    NewsModel.all().then(function(res){ 
     $scope.comments = res; 
    }); 
} 

und dann fetchComments() aufrufen, wenn Sie die Kommentare aktualisieren möchten.