javascript - Angular : how to pass $scope variables into the Node. js 服务器。

现在我有这个表格:

<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 未定义，当我提交表单时。

最佳答案

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

我不记得很多 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 - 请记住这是一个示例，您可以使用任何您想要的名称)。它是这样工作的:

为 ng-model 中的每个字段提供一个前缀，以便同一个对象保存表单数据。由于您只有一个字段，因此就足够了:

ng-model="formData.stickie"

我特意更改了变量名 以匹配 nodejs 服务器中等待的名称。不要忘记这一点，因为我将直接使用对象作为数据。

$scope.formData 的最终值将是 {stickie: whatEverIsInTheInputField} 。如果我使用 ng-model="formDta.foo" 作为绑定(bind)添加另一个字段，那么 $scope.formData 的最终值将是 {stickie: whatEverIsInTheInputField, foo: otherFieldValue} 。

我直接在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);
        });
};

尽管 formData 事先不存在于 $scope 中，但绑定(bind)在其下创建 stickie 之前隐式创建了它。

关于javascript - Angular : how to pass $scope variables into the Node. js 服务器。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25025426/