Angular:如何将$ scope变量传递到Node.js服务器.

Question

现在我有这样的形式:

<form ng-submit = "submit()"ng-controller = "formCtrl">
                <input ng-model="formData.stickie" type="text" id="sticky_content" />
                <button type="submit" id="add_sticky" value="add a new stickie!">new sticky</button> 
        </form>

由这个模型控制:

app.controller('formCtrl',function($scope,$http){

        $scope.submit = function() {
                $http.post('/api/stickies', $scope.formData)
                                **** somehow assign data to something useable by the function below???******

                        })
                        .error(function(data){
                                console.log('Error: ' + data);
                        });
        };
});

我希望能够在这里使用发布的数据:

app.post('/api/stickies',function(req,res){
        var test = formData.stickie;    //returns undefined for sticky and for formData.stickie
        db.run("INSERT INTO stickies (data) VALUES (?)", [ test ]);
});

总而言之,我试图将$ scope.formData变量传递到我的server.js文件中,以便它可以在我的app.post函数中使用(并插入到db中)

编辑:根据下面给出的答案更新代码:当我收到`ReferenceError:formData未定义,当我提交表单时.

Answer 1

使用ng-model它时,使用特定名称将表单组件绑定到作用域.这意味着

<input ng-model="stickie_text" type="text" id="sticky_content" />

将为您$scope.stickie_text提供'formCtrl'控制器中组件的当前值.请记住它是双向绑定:如果更改该变量,还可以更改表单控件中的值.

让我们重构一遍:

<form ng-submit="submit()" ng-controller="formCtrl">
    <input ng-model="stickie_text" type="text" id="sticky_content" />
    <button type="submit" id="add_sticky" value="add a new stickie!">new sticky</button> 
</form>

此表单只有一个字段:stickie_text.另一个是按钮.到目前为止,您的表单有一个字段,它以指定的名称()存储和读取范围内的数据$scope.stickie_text.

提交表单时,$scope.submit正在调用您的函数:

$scope.submit = function() {
    $http
        .post('/api/stickies', {what: to, put: here})
        .success(function(data){
            //what to do here
        })
        .error(function(data){
            console.log('Error: ' + data);
        });
};

所以这是你的处理程序,最大的问题是:

• 该怎么办？
• 我如何发布数据？
• 我发布后如何处理相同的数据？

注意我稍微更改了处理程序 - 放置注释并替换数据对象.

POST数据必须与服务器端匹配.因此,如果你的粘性物质必须以名称飞行通过网络stickie(这样,req.body.stickie服务器端存在表达式),你必须编写的数据是:{stickie: $scope.stickie_text}.这是因为stickie_text您在视图中使用的名称,因此它是范围var的名称,此类字段将从中读取和写入.请记住body parser在应用程序中安装中间件.

我不记得很多nodejs,但如果我是对的,也许正在做:

app.post('/api/stickies',function(req,res){
    var test = req.body.stickie;
    db.run("INSERT INTO stickies (data) VALUES (?)", [ test ]);
});

只要您使用来自客户端的相同数据密钥,就可以这样做.你还应该在response(res)对象中写一些东西,但这取决于你和nodejs,以及你喜欢的方式(例如res.write).

所以,我们将坚持使用相同的例子:

$scope.submit = function() {
    $http
        .post('/api/stickies', {stickie: $scope.stickie_text})
        .success(function(data){
            //what to do here? it's up to you and the data you write from server.
        })
        .error(function(data){
            console.log('Error: ' + data);
        });
};

测试一下,检查你的数据库.

编辑 - 由@Kousha建议 - 为表单数据使用事实上的命名空间(如前所述 - 请formData记住这是一个示例,您可以使用任何您想要的名称).它的工作原理如下:

1. 为每个字段添加前缀ng-model,因此相同的对象包含表单数据.由于你只有一个字段,这就足够了:

   ng-model="formData.stickie"
   

   故意我改变了变量名以匹配在nodejs服务器中等待的名称.不要忘记这一点,因为我会直接将对象用作数据.

2. 最终的价值$scope.formData将是{stickie: whatEverIsInTheInputField}.如果我使用添加了另一个领域ng-model="formDta.foo"具有约束力,最终值$scope.formData会{stickie: whatEverIsInTheInputField, foo: otherFieldValue}.

3. 我$scope.formData直接在http请求中使用:

   $scope.submit = function() {
       $http
           .post('/api/stickies', $scope.formData)
           .success(function(data){
               //what to do here? it's up to you and the data you write from server.
           })
           .error(function(data){
               console.log('Error: ' + data);
           });
   };
   

4. 虽然事先formData并不存在$scope,但绑定在创建它之前隐式创建stickie它.