我有一个帖子列表,每个帖子都有关联的评论。我有单独的Web服务来列出帖子和评论。所以我这样做:
<li class="timeline-item" ng-repeat="post in controller.myposts">
<div class="panel panel-white">
<div class="panel-body">
<div class="timeline-item-header">
<img src="{{post.userImageURL}}" style="height: 50px" alt="">
<p>{{post.userName}} <span>Posted a Status</span></p>
<small>{{post.created}}</small>
</div>
<div class="timeline-item-post">
<p>{{post.message}}</p>
<div class="timeline-options">
<a href="#"><i class="icon-like"></i> Like (7)</a>
<a href="#"><i class="icon-bubble"></i> Comment (2)</a>
<a href="#"><i class="icon-share"></i> Share (3)</a>
</div>
<div class="margin-bottom-20">
<a class="cursor-pointer" ng-click="controller.loadPreviousComments(post.id)">view previous comments</a><br>
</div>
{{post.comments}}
<div class="timeline-comment" ng-repeat="comment in post.comments">
<div class="timeline-comment-header">
<img src="/assets/images/avatar5.png" alt="" onerror="this.src='/assets/images/avatar1.png''">
<p>Nick Doe <small>1 hour ago</small></p>
</div>
<p class="timeline-comment-text">Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</div>
<textarea class="form-control" placeholder="Reply"></textarea>
</div>
</div>
</div>
</li>
当这是我的控制器时:
this.loadPreviousComments = function(messageId,limit){
var limit = limit || 5;
$http.get('/api/v2/communitycomments',{params:{messageId:messageId,items:limit}})
.success(function(data){
that.myposts.comments = data.message;
});
}
由于显而易见的原因,它无法正常工作:我更新了控制器中的myposts.comments,这是个别帖子的子范围。
实现这一目标的最佳方式是什么?
答案 0 :(得分:0)
您可以在加载评论时传递整篇文章:
HTML:
<a class="cursor-pointer" ng-click="controller.loadPreviousComments(post)">view previous comments</a>
控制器:
// Takes a 'message' as parameter instead of just the id
this.loadPreviousComments = function (message, limit){
var limit = limit || 5;
var params = {
messageId: message.id,
items: limit
};
$http.get('/api/v2/communitycomments', { params: params })
.success(function (data){
// Add older comments to existing ones
message.comments = (message.comments || []).concat(data.message);
});
}