javascript - Angular : how to pass $scope variables into the 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 时，它是将你的表单组件绑定(bind)到使用特定名称的范围。这意味着

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

将为您带来一个$scope.stickie_text，其中包含您在'formCtrl' Controller 中的组件的当前值。请记住这是一个双向绑定(bind):如果您更改该变量，您也会更改表单控件中的值。

让我们重构一下:

<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 是您在 View 中使用的名称，因此它是该字段将从中读取和写入的范围变量的名称。请记住在您的应用程序中安装 body 解析器 中间件。

我不太记得 nodejs，但如果我是对的，也许会做:

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

将执行此操作只要您使用来自客户端的相同数据 key 。您还应该在响应 (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" 添加另一个字段作为绑定(bind)，$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 中，但绑定(bind)在其下创建 stickie 之前隐式创建了它。