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 函数中使用（并插入到数据库中）

编辑：根据下面给出的答案更新代码：当我提交表单时，当前出现`ReferenceError：formData is not Defined。

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 必须以stickie 的名称通过网络（这样，在服务器端存在req.body.stickie 表达式），您必须编写的数据是：{stickie: $scope.stickie_text}。这是因为stickie_text 是您在视图中使用的名称，因此它是该字段将从中读取和写入的范围变量的名称。请记住在您的应用程序中安装body parser 中间件。

我不太记得 nodejs，但如果我是对的，也许正在做：

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

会这样做只要您使用来自客户的相同数据密钥。您还应该在响应 (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. 我在http请求中直接使用$scope.formData：

   $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之前隐式创建了它。