如何修复AngularJS中的ng提交

Question

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

基本上，我已经尝试通过查看comment功能是如何为posts实现的来实现reply函数，即用comment替换post，用reply替换comment。

我的index.ejs，在这里我可以添加评论到帖子。

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

当我这样做的时候，点击回复按钮什么都不会做。

以下是我的应用Angular.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>