如何修复 AngularJS 中的 ng-submit？

Question

I am new to NodeJS and I'm trying to build a forum app using Angular with the ability to reply to comments. I'm able to add comments to a post. But I'm not able add replies to the comments of a post. I think I'm doing something wrong with my controllers and routes.

Basically, I've tried implementing the reply function by looking at how the comment function was implemented for posts ie replaced post with comment and comment with reply.

My index.ejs, here I'm able to add comments to the post.

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

To implement the reply functionality, I added the following code

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

before

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

in my index.ejs. When I do this, clicking on the reply button does nothing.

The following is what is present in my 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 = '';
        };

        // .......

    }]);

I wrote the code for o.addReply() similar to o.addComment() which I think is incorrect.

The following is my 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();
    });
});

For implementing replies, I added the following to my 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();
    });
});

Finally, this is my mongoose model

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

Check this line of code in your appAngular.js file

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

There is a double + sign in your route address. It can be source of your problem.

Answer 2

Try this:

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