javascript - 快速路由将 JSON 返回为 Angular 形式问题

Question

我用于注册/登录用户的 Angular Controller 如下:

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 数据发送到正确的路线， Controller 会从那里正确处理所有事情。但是， Controller 返回 res.json({ response: result }); 并且在提交表单后，当我希望将 JSON 插入表单中时，它仅显示 JSON。

快速路由/ Controller ，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 堆栈配置。为什么它仅使用页面上的 JSON 重新加载/签名？我该如何解决此问题？

Answer 1

Angular 正在为您执行 POST，因此您无需在 HTML 表单上进行设置。因此，删除此 action="/sign"method="post"，它会使您的页面 POST 数据并因此刷新:

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

您的“提交按钮”需要调用 Controller 中声明的 Angular $http POST 方法，因此它需要执行如下操作:

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

此外，您需要在 Controller 中注入(inject) $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">