Angular.js - Jade,表单提交

时间:2014-08-18 08:24:21

标签: angularjs express pug ng-submit

我是Angular的新手,我正在建立我的第一个基于锅炉板的实时页面:

https://github.com/jimakker/angular-express-bootstrap-seed

我无法提交第一张表格。事实上,当我点击按钮时没有任何反应。以下是代码中的相关摘录:

部分视图:

.row
form(ng-controller='RegisterCtrl')
    #accordion.panel-group
           //- Panel 1
           .panel.panel-default
            .panel-heading
                h4(class='panel-title')
                    a(data-target='#collapse1', data-toggle="collapse", data-parent="#accordion", class="left-m-1em cursor-pointer") Basic Information
            #collapse1.panel-collapse.collapse
                .panel-body
                    .row
                        .col-lg-2(ng-controller='DropdownCtrl')
                            select(id="gender", ng-model='register.gender', ng-init="getValues('gender')", ng-options='r.value for r in results track by r.key', chosen, class="form-control", data-placeholder="Gender", data-toggle="tooltip", data-trigger="hover", data-placement="top", title="Gender")
                                option(value="") 

//- More panels in between and finally, Panel 6
           .panel.panel-default
            .panel-heading
                h4(class='panel-title')
                    a(data-target='#collapse6', data-toggle="collapse", data-parent="#accordion", class="left-m-1em cursor-pointer") Family
            #collapse6.panel-collapse.collapse
                .panel-body
                    .row
                        .col-lg-3.col-lg-offset-5
                            button(type="button", class="btn btn-success btn-lg", ng-click="saveProfile")
                                span(class="glyphicon glyphicon-ok-circle") 
                                | Submit

我查看了渲染的输出,并确认提交按钮确实位于表单标记内。

控制器:

function RegisterCtrl($scope, $http) {
$scope.register = {};
$scope.saveProfile = function(item, event) {
    alert("called this!");
    var json = {
        gender: $scope.register.gender,
        marital_status: $scope.register.marital_status,
        dob: $scope.register.dob,
        height: $scope.register.height,
        weight: $scope.register.weight,
        complexion: $scope.register.complexion,
        health: $scope.register.health
    };

    var responsePromise = $http.post("/api/register", json, {});
    responsePromise.success(function(dataFromServer, status, headers, config) {
        console.log(dataFromServer.title);
    });
    responsePromise.error(function(data, status, headers, config) {
        alert("Submitting form failed!");
    });

};
}
RegisterCtrl.$inject = ['$scope', '$http'];

我甚至没有达到第一个提醒声明,而且我完全不确定原因。另一个控制器DropdownCtrl(用于单个表单元素)工作正常,我可以使用控制器动态填充值。请帮我找到丢失的部分。

2 个答案:

答案 0 :(得分:1)

语法为ng-click="saveProfile()"而不是ng-click="saveProfile"

另请注意,这不会传递给函数的任何参数,如果你想这样做,那么你也需要在标记内传递它们。

答案 1 :(得分:0)

发现问题。在控制器文件中有一些杂散代码:

`function MyCtrl2(){      }      MyCtrl2。$ inject = [];

 function RegisterCtrl() {
 }
 RegisterCtrl.inject = [];`

由于这是在实际定义之后的文件中,它搞砸了功能。