2016-12-18 10 views
0

私はサーバー側でJavaを使用してインターネットショップを作成しています。コメント欄で作業した後に問題が発生しました。私のコメントリストは、2回目に送信ボタンをクリックした後にリフレッシュされ、前にコメントが書き込まれています。だから私のコメントを見るには、最初にそれをサーバーに送るためにクリックし、コメント配列をリフレッシュする必要があります(ただし、2回目のクリック後に新しいコメントを送信しますが、レンダリングしません)。 助けてください、私は角角度コードは2回目のクリック後に機能します

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> 
+0

では、/ devツールでは、すべてのコメントAPIを取得するネットワーク]タブの応答に見てみましょう –

答えて

6

あなたが並行して、この二つの機能を実行しているように思える:

あなたのコメントに基づいて
$scope.send = function() { 
    sendComment(); 
    getAllComments(); 
}; 

、あなたは新しいメッセージが送信(保存)される前にmeesagesを取得しています。 あなたはこれを解決する約束、行う必要があります。

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

}; 
関連する問題