如何修复 AngularJS 中的 ng-submit？

Question

我是 NodeJS 的新手，我正在尝试使用 Angular 构建一个能够回复 cmets 的论坛应用程序。我可以将 cmets 添加到帖子中。但我无法向帖子的 cmets 添加回复。我认为我的控制器和路由有问题。

基本上，我通过查看 comment 功能是如何为 posts 实现的（即用评论替换 post）来尝试实现 reply 功能并回复评论。

我的 index.ejs，在这里我可以将 cmets 添加到帖子中。

<script type="text/ng-template" id="/posts.html">

..............

<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
  <span style="font-size:20px; margin-left:10px;">
    {{comment.body}}
  </span>
</div>

<form ng-submit="addComment()" id= "my-form" style="margin-top:30px;">
  <h3>Add a new comment</h3>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Comment" ng-model="body"></input>
    </div>
  <button type="submit" class="btn btn-primary">Post</button>
</form>
</script>

为了实现回复功能，我添加了以下代码

<div ng-repeat="reply in comment.replies">
      <span style="font-size:10px; margin-left:10px;">
        {{reply.replytext}}
      </span>
    </div>
    <form ng-submit="addReply()" style="margin-top:20px;">
      <h3>Add a new reply</h3>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Reply" ng-model="replytext"></input> 
        </div>
        <button type="submit" class="btn btn-secondary">Reply</button>
    </form>
</div>

之前

<form ng-submit="addComment()" id= "my-form" style="margin-top:30px;">

在我的 index.ejs 中。当我这样做时，点击回复按钮没有任何反应。

以下是我的 appAngular.js 中存在的内容

app.factory('posts', ['$http', function ($http) {
    var o = {
        posts: []
    };
    // .......

    o.addComment = function (id, comment) {
        return $http.post('/posts/' + id + '/comments', comment);
    };

    // .........

    return o;
}]);

app.controller('PostsCtrl', [
    '$scope', 'posts', 'post',
    function ($scope, posts, post) {
        $scope.post = post;
        $scope.addComment = function () {
            if (!$scope.body || $scope.body === '') { return; }
            posts.addComment(post._id, {
                body: $scope.body,
                author: 'user',
            }).success(function (comment) {
                $scope.post.comments.push(comment);
            });
            $scope.body = '';
        };

        // .......

    }]);

我为 o.addReply() 编写了类似于 o.addComment() 的代码，我认为这是不正确的。

以下是我的routes.js，

router.post('/posts/:post/comments', function (req, res, next) {
    var comment = new Comment(req.body);
    comment.post = req.post;

    comment.save(function (err, comment) {
        if (err) { return next(err); }

        req.post.comments.push(comment);
        req.post.save(function (err, post) {
            if (err) { return next(err); }
            res.json(comment);
        });
    });
});

router.param('comment', function (req, res, next, id) {
    var query = Comment.findById(id);

    query.exec(function (err, comment) {
        if (err) { return next(err); }
        if (!comment) { return next(new Error('can\'t find post')); }

        req.comment = comment;
        return next();
    });
});

为了实现回复，我在我的 routes.js 中添加了以下内容

router.post('/posts/:post/comments/:comment/replies', function (req, res, next) {
    var comment = new Comment(req.body);
    comment.post = req.post;

    var reply = new Reply(req.body);
    reply.comment = req.comment;

    reply.save(function (err, reply) {
        if (err) { return next(err); }

        req.post.comments.comment.replies.push(reply);
        req.post.comments.coment.save(function (err, comment) {
            if (err) { return next(err); }

            res.json(reply);
        });
    });
});

router.param('reply', function (req, res, next, id) {
    var query1 = Reply.findById(id);

    query1.exec(function (err, reply) {
        if (err) { return next(err); }
        if (!reply) { return next(new Error('can\'t find comment')); }

        req.reply = reply;
        return next();
    });
});

最后，这是我的猫鼬模型

var CommentSchema = new mongoose.Schema({
    body: String,
    author: String,
    upvotes: { type: Number, default: 0 },
    post: { type: mongoose.Schema.Types.ObjectId, ref: 'Post' },
    reply: { type: mongoose.Schema.Types.ObjectId, ref: 'Reply' }
});

    .........

var ReplySchema = new mongoose.Schema({
    comment: { type: mongoose.Schema.Types.ObjectId, ref: 'Comment' },
    replytext: String
});

mongoose.model('Comment', CommentSchema);
mongoose.model('Reply', ReplySchema);

Answer 1

检查 appAngular.js 文件中的这行代码

return $http.post('/posts/' + post._id + '/comments/' + comment._id ++ '/replies', reply);

您的路线地址中有一个双 + 符号。这可能是您的问题的根源。

Answer 2

试试这个：

<form action="/method2"  method="post" style="margin-top:20px;">
      <h3>Add a new reply</h3>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Reply" ng-model="replytext"></input>

        </div>
        <button type="submit" value="accept" class="btn btn-secondary">Reply </button>
    </form>
</div>

<form action="/method1"  method="post" style="margin-top:30px;">
  <h3>Add a new comment</h3>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Comment" ng-model="body"></input>
    </div>
  <button type="submit" class="btn btn-primary">Post</button>
</form>