Question

我正在构建一个Reddit克隆。到目前为止，您可以在发布的链接上添加链接，upvote / down投票和评论/删除评论。您必须通过Twitter登录才能添加评论或帖子。

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

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

这是源代码。

＆＃13;

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

这是数据库的图片，显示评论仅存在于第一篇文章中。

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

Answer 1

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

然后在您的模板中，您为post上的ng-repeat内的每个posts循环遍历此一个数组，因此两个帖子都是相同的。您需要循环遍历comments特定于post的{{1}}。像这样：

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

注意post.comments。

为什么一篇帖子的评论会出现在所有帖子中？

1 个答案: