Угловой код работает после второго щелчка

Question

Я пишу интернет-магазин с использованием Java на стороне сервера и угловат на клиенте. Я столкнулся с проблемой после работы с разделом комментариев. Мой список комментариев обновляется после второго раза, когда я нажимаю кнопку отправки, с комментарием, написанным ранее. Итак, чтобы увидеть мой комментарий, мне нужно щелкнуть сначала, чтобы отправить его на сервер, а затем обновить массив комментариев (но после второго щелчка он отправит новый комментарий, но не отобразит его). Пожалуйста, помогите, я новичок в угловом

var productApp = angular.module('productApp', []); 
productApp.controller('productCtrl', ['$scope', '$location', '$http', function ($scope, $location, $http) { 
    var url = $location.absUrl() + '/comments'; 
    $scope.comments = []; 
    function getAllComments() { 
    $http.get(url).then(function (response) { 
     $scope.comments = response.data; 
    }); 
    } 

    var sendComment = function() { 
    var comment = {'userName': 'danko', 'content': $scope.comment}; 
    $http.post(url, comment); 

    }; 
    $scope.send = function() { 
    sendComment(); 
    getAllComments(); 
    }; 
    getAllComments(); 
}]); 

Шаблон:

<ul class="media-list"> 
        <li class="media"> 
         <div ng-repeat="comment in comments" class="media"> 
          <a class="pull-left"> 
           <img class="media-object img-circle" src="/resources/img/user.png" 
            style="width: 64px; height: 64px;"> 
          </a> 
          <div class="media-body"> 
           <h4 class="media-heading">{{comment.userName}}</h4> 
            {{comment.content}} 
          </div> 
         </div> 
        </li> 
       <br> 
       <div class="input-group"> 
         <textarea class="form-control custom-control" ng-model="comment" placeholder="Leave feedback" rows="3" 
            style="resize:none"></textarea> 
        <span class="input-group-addon btn btn-success" ng-click="send()">Send</span> 
       </div> 
      </ul> 

Answer 1

Похоже, вы работаете эти две функции одновременно:

$scope.send = function() { 
    sendComment(); 
    getAllComments(); 
}; 

на основе ваших комментариев, вы получают сообщения до того, как новое сообщение будет отправлено (сохранено). Вы должны дать обещание, чтобы решить эту проблему:

$scope.send = function() { 
    sendComment(); 
}; 
var sendComment = function() { 
    var comment = {'userName': 'danko', 'content': $scope.comment}; 
    $http.post(url, comment).then(function(){   
     getAllComments(); 
    }) 

};