为什么只有一篇文章的评论可以显示所有文章？

我正在构建一个Reddit克隆。到目前为止，您可以添加链接，upvote/down投票，并评论/删除发布的链接评论。您必须通过Twitter登录才能添加评论或帖子。为什么只有一篇文章的评论可以显示所有文章？

我面临的最大问题是每当有人发表评论时，如果您重新加载网站，他们就不会显示出来。您必须添加新评论才能看到已存在的评论。下一个大问题是，如果添加新帖子，它会自动继承之前评论过的帖子中的评论，即使这些评论不在Firebase服务器上的帖子数据中。

如果您对新帖子发表评论，它会导致所有其他帖子的评论继承新帖子的新评论。

这里是源代码。

<div> 
    <span>Currently Logged in as: {{authData.twitter.username}}</span> 
    <form> 
     <div class="form-group"> 

      <div class="row"> 
       <div class="col-xs-6"> 
        <label class="control-label" for="focusedInput">Post Name</label> 
        <input type="text" ng-model="post.name" class="form-control"> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-xs-6"> 
        <label class="control-label" for="focusedInput">Description</label> 
        <input type="text" ng-model="post.description" class="form-control"> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-xs-6"> 
        <label class="control-label" for="focusedInput">URL</label> 
        <input type="text" ng-model="post.url" class="form-control"> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-xs-3"> 
        <button ng-click="savePost(post)" class="form-control" style="margin-top: 25px">Submit</button> 
       </div> 
      </div> 
     </div> 

    </form> 
</div> 

<div ng-repeat="post in posts"> 
    <h2><a ng-href="{{post.url}}">{{post.name}}</a></h2> 
    <p>{{post.description}}</p> 
    <button ng-click="deletePost(post)" class="btn btn-danger">Delete Post</button> 
    <span>{{post.votes}}</span> 
    <button ng-click="addVote(post)" class="btn btn-primary">Up Vote</button> 
    <button ng-click="removeVote(post)" class="btn btn-primary">Down Vote</button> 
    <br> 
    <br> 
    <div class="panel panel-default" ng-repeat="comment in comments"> 
     <div class="panel-body"> 
      <a ng-href="https://twitter.com/{{comment.user}}">{{comment.user}}</a> 
     </div> 
     <div class="panel-footer"> 
      {{comment.text}} 
      <br> 
      <button class="btn btn-danger" ng-click="removeComment(post, comment)">Remove Comment</button> 
     </div> 
    </div> 

    <form> 
     <div class="input-group"> 
      <input ng-model="comment.text" class="form-control"> 
      <div class="input-group-btn"><button ng-click="addComment(post, comment)" class="btn btn-success">Add Comment!</button></div> 
     </div> 
    </form> 
</div> 


<br> 
<button class="btn btn-primary" ng-click="login()">Log in with Twitter</button>

<!--Starter Project for the Reddit Clone--> 
<!doctype html> 
<html ng-app="reddit-clone"> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js"> 
    </script> 
    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> 
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script> 
    <link rel="stylesheet" href="bootstrap.css"> 
    <script src="app.js"></script> 
    <title>Reddit Clone</title> 
</head> 

<body style="width: 80%; margin: 0 auto"> 
    <h1 class="text-center">Reddit Clone</h1> 
    <div ng-view></div> 
</body> 

</html>

此处给出了一个注释只能存在于后的第一个数据库中的图片。

下面是一张图片，显示评论如何显示在两个帖子上，即使它只在数据库中有一个。

来源

2015-07-20 Isaac

您在$scope上只存储一个comments数组。

然后在您的模板中，您正在post内部的每个post的posts上循环播放这一个数组，因此这两个帖子都是相同的。您需要循环使用特定于post的comments。像这样：

<div class="panel panel-default" ng-repeat="comment in post.comments">

请注意post.comments。

来源

2015-07-20 23:58:43 Michal

非常感谢！那就是诀窍！感觉像我正在驾驶我的头靠在墙上大约一个小时大声笑 – Isaac

乐意帮忙！像这样的嵌套重复可能会变得棘手。它有助于逐步完成代码并考虑每个值和它来自哪里。 Google Chrome的开发人员工具是让浏览器帮助您进行这种调试的好方法。这是一个介绍/指南：https://developer.chrome.com/devtools/docs/javascript-debugging – Michal

非常感谢！如果我再打扰一个问题，现在所有的注释都正确显示，那么删除注释按钮和功能将不再按原样运行。任何想法如何解决这个问题？ – Isaac

为什么只有一篇文章的评论可以显示所有文章？

回答

相关问题