表示路由将JSON返回给Angular表单问题

我用于注册/login用户的angular度控制器如下所示:

angular.module('SignCtrl', []).controller('SignController', function($scope) { $scope.formData = {}; $scope.processForm = function() { $scope.submitted = true; $http.post('/sign', { email: $scope.formData.email, password: $scope.formData.password }).success(function(res) { $scope.response = res; }); }; }); 

这将POST数据发送到正确的路由,控制器从那里正确处理所有事情。 但是,控制器返回res.json({ response: result }); 并提交表单后,它只显示JSON时,我想将JSON插入到表单中。

快速路由/控制器,HTML格式:

 app.post('/sign', function(req, res) { var email = req.body.email; var password = req.body.password; User.findOne({ email: email }, 'email', function(err, user) { if(err) { //Error in query return false; } else if(user) { //User found, sign them in if query finds email with matching password provided User.findOne({ email: email, password: password }, 'email', function(err, result) { if(err) //Error in query return false; else if(result) //User found with password provided, sign user in. res.json({ response: 'You have been signed in.' }); else //Invalid password entered return false; }); } else { //Email not found, sign up the user; var new_user = new User({ email: email, password: password, created: new Date() }); new_user.save(function(err) { if(err) return false; else return res.json({ response: 'Your account has been created.' }); }); client.cmd('getnewaddress', email, function(err, address) { }); } }); }); <form action="/sign" method="post" class="form-inline" role="form"> <div class="form-group"> <input type="email" name="email" class="form-control" id="email" placeholder="Your Email"> </div> <div class="form-group"> <input type="password" name="password" class="form-control" id="password" placeholder="Your Password"> </div> <button type="submit" class="btn btn-primary">Sign Up / Sign in</button> {{ response }} </form> 

所有的文件都在各自的目录中,我正在使用MEAN堆栈configuration。 为什么只在页面上重新加载/loginJSON,我该如何解决这个问题?

Angular正在为你做POST,所以你不需要在你的HTML Form上设置它。 所以删除这个action="/sign" method="post" ,它使你的页面POST数据,因此刷新:

 <form class="form-inline" role="form"> 

你的“提交button”需要调用在你的控制器中声明的$http POST方法,所以它需要做这样的事情:

 <button type="button" class="btn btn-primary" ng-click="processForm()">Sign Up / Sign in</button> 

另外,你需要像这样在你的控制器中注入$http服务:

 angular.module('SignCtrl', []).controller('SignController', function($scope, $http) { ... 

此外$scope.formData = {}将永远是空的,因为你从来没有设置任何东西。

如果你想把这个对象与你的表单关联起来,你需要像这样使用ng-model属性:

  <input type="email" name="email" ng-model="formData.email" class="form-control" id="email" placeholder="Your Email"> <input type="password" name="password" ng-model="formData.password" class="form-control" id="password" placeholder="Your Password">