Question

我想使用Angular UI Bootstrap的模式提交表单。我正在实例化模态：

AdminUsers.factory('ProjectsService', ['$resource', function($resource) {

    return $resource('/api/users?sort=createdAt desc');

}]).controller('AdminUsersCtrl', ['ProjectsService', '$scope', '$http', '$modal', '$log', function(ProjectsService, $scope, $http, $modal, $log, $modalInstance) {

$scope.open = function () {

        var modalInstance = $modal.open({

            templateUrl: '../templates/userModal.html',
            controller: function($scope, $modalInstance) {

                $scope.user = {};

                $scope.ok = function () { $modalInstance.close($scope.user); };

                $scope.cancel = function () { $modalInstance.dismiss('cancel'); };

            },
            resolve: {

                items: function () {

                    return $scope.user;

                }

            }
        });

        modalInstance.result.then(function (user) {

            $scope.user = user;

            $http.post('/api/users/new', $scope.user).success(function() {

                $scope.users.unshift($scope.user);

            });

        }, function () {

            $log.info('Modal dismissed at: ' + new Date());

        });

    };

}

PS：请注意上面的控制器确实有其他方法没有在上面显示。

我的userModal.html中的代码是：

<div class="modal-header">
        <button type="button" class="close" ng-click="cancel()">&times;</button>
        <h6>New customer</h6>
    </div>

    <div class="modal-body">

        <form class="form-horizontal fill-up separate-sections">

            <div>

                <label>Name</label>
                <input type="text" ng-model="user.name" placeholder="Name" />

            </div>

            <div>

                <label>Email</label>
                <input type="email" ng-model="user.email" placeholder="Email" />

            </div>

            <div>

                <label>Admin</label>
                <select class="form-control" ng-model="user.admin"
                        ng-options="option as option for option in [true, false]"
                        ng-init="user.admin=false"></select>
                <input type="hidden" name="user.admin" value="{{user.admin}}" />

            </div>

            <div>

                <label>Password</label>
                <input type="password" ng-model="user.password" placeholder="Password" />

            </div>

            <div>

                <label>Password confirmation</label>
                <input type="password" ng-model="user.confirmation" placeholder="Password confirmation" />

            </div>

            <div class="divider"><span></span></div>


            <div class="divider"><span></span></div>

        </form>

    </div>

    <div class="modal-footer">
        <button class="btn btn-blue btn-lg" ng-click="ok()">Save</button>
        <button class="btn btn-default btn-lg" ng-click="cancel()">Cancel</button>
        <input type="hidden" name="_csrf" value=_csrf />
    </div>

问题在于隐藏的输入。我需要将带有表单的csrf提交给服务器，但我不知道如何。如果这是一个玉模板我可以简单地说：

input(type="hidden", name="_csrf", value=_csrf)

和Sails / Express会处理剩下的事情。但因为这只是Angular使用的html模板，我不知道如何访问_csrf键。我试过调查window.document.cookie然而它返回未定义。

任何人都可以对此有所了解吗？

非常感谢

如何使用angular ui bootstrap的modal和csrf提交表单

0 个答案: