AngularJS在ng-click后进行重定向。
AngularJS在ng-click后进行重定向。
我有一个REST API,用于从MongoDB数据库中读取/保存数据。\n我使用的应用程序从一个表单中检索数据并创建一个对象(一个任务),然后将其保存到数据库中。在表单之后,我有一个按钮,点击事件会触发控制器的保存函数,然后重定向到另一个URL。\n当我点击按钮时,系统会告诉我该任务已成功添加到数据库中,但应用程序卡住,重定向从未被调用。然而,如果我重新加载应用程序,我可以看到新的“任务”已成功添加到数据库中。这是怎么回事?谢谢!\n这是我的代码:\n示例html(jade)代码:\nbutton.btn.btn-large.btn-primary(type=\'submit\', ng:click=\"save()\") 创建
\nangular模块的控制器:\n
function myJobOfferListCtrl($scope, $location, myJobs) { $scope.save = function() { var newJob = new myJobs($scope.job); newJob.$save(function(err) { if(err) console.log('无法创建新任务'); else { console.log('准备重定向'); $location.path('/offers'); } }); }; }
\nangular模块的配置:\n
var myApp = angular.module('appProfile', ['ngResource']); myApp.factory('myJobs',['$resource', function($resource) { return $resource('/api/allMyPostedJobs', {}, { save: { method: 'POST' } }); }]);
\n我的nodejs应用程序中的路由:\napp.post(\'/job\', pass.ensureAuthenticated, jobOffers_routes.create);
\n最后是我的REST API的控制器:\n
exports.create = function(req, res) { var user = req.user; var job = new Job({ user: user, title: req.body.title, description: req.body.description, salary: req.body.salary, dueDate: new Date(req.body.dueDate), category: req.body.category}); job.save(function(err) { if(err) { console.log(err); res.redirect('/home'); } else { console.log('用户' + user.username + '发布了新工作。'); //<---在日志中显示的消息 //res.redirect('/offers'); //<----已触发但从未渲染 res.send(JSON.stringify(job)); } }); };
问题的原因是,当使用AngularJS的$resource服务发送POST请求创建一个新的job对象时,REST API将返回一个包含创建的job的JSON对象。在这种情况下,代码将这个JSON对象误认为是一个错误,并触发了日志信息。因此,页面重定向的代码永远不会执行。
解决方法是,在保存job对象时,将返回的JSON对象正确处理为创建的job对象,并使用$window.location.href属性来完全重新加载页面。修改后的代码如下:
$scope.save = function() { var newJob = new myJobs($scope.job); newJob.$save(function(job) { if(!job) { $log.log('Impossible to create new job'); } else { $window.location.href = '/offers'; } }); };