Javascript AngularJS表格提交不开火

我似乎无法理解为什么下面的代码没有触发表单提交

表单具有

ng submit=“vm.processForm（）”

ng控制器

具有

processForm

功能

这是一个使用

uirouter

的嵌入式视图，但我认为只要视图本身正常工作，这并不重要，我至少希望它触发页面提交

感谢您的建议

--西蒙

HTML代码：

<section class="mainbar">
<section class="matter">
    <div class="container">
        <div class="row">
            <div class="widget wviolet">
                <div ht-widget-header title="{{vm.title}}"></div>
                <div class="widget-content user">
                    <form name="submitjobform" novalidate ng-controller="SubmitJobController" class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">

                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-10">
                                <input ng-model="formData.name" type="text" class="form-control" name="name" ngRequired="true" >
                                <span class="error" ng-show="submitjobform.name.$error.required">
                                    Required!</span>
                                </div>
                            </div>



                            <div class="form-group">
                                <label for="description" class="col-sm-2 control-label">Description</label>
                                <div class="col-sm-10">
                                    <textarea  ng-model="formData.description" class="form-control" name="description" ngRequired="true" >
                                    </textarea>
                                    <span class="error" ng-show="submitjobform.description.$error.required">
                                        Required!</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="category" class="col-sm-2 control-label">Category</label>
                                    <div class="col-sm-10">
                                        <input type="text" ng-model="formData.category" class="form-control" name="category" ngRequired="true" >
                                        <span class="error" ng-show="submitjobform.category.$error.required">
                                            Required!</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="status" class="col-sm-2 control-label">Assignee</label>
                                        <div class="col-sm-10">
                                            <select ng-model="formData.assignee" class="form-control" name="assignee" ngRequired="true" ng-options="name.name for name in vm.names">
                                            </select>
                                            <span class="error" ng-show="submitjobform.assignee.$error.required">
                                                Required!</span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-2">
                                                <input type="button" value="Submit" id="submitjobform_submit" class="btn btn-danger">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="widget-foot">
                                    <div class="clearfix"></div>    
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </section>

(function () {
'use strict';

angular
.module('app.submitjob')
.controller('SubmitJobController', SubmitJobController);

SubmitJobController.$inject = ['logger'];
/* @ngInject */
function SubmitJobController(logger) {
    var vm = this;
    vm.title = 'Complete the fields below and hit submit to create a new job';
    vm.names = [
    {name:'Kishori', role:'child'},
    {name:'Zen', role:'child'},
    {name:'Simon', role:'parent'},
    {name:'Nam', role:'parent'}
    ];


    activate();

    function processForm() {
        logger.info('awesome!');
    };

    function activate() {
        logger.info('Activated Submit Job View');
    }
}
})
();

谢谢你的帮助

---

Simon

您的代码存在各种问题：-

1） 看起来您正试图使用controller作为语法，在这种情况下，您需要在

ng controller

指令中指定它。i、 e do:

ng controller=“将作业控制器作为vm提交”

。似乎您正在尝试访问以

vm

为前缀的属性（如果不是，则必须在

$scope

上设置）

2） 输入类型

type=“button”

不会触发表单提交，您需要将其更改为

type=“submit”

，以便在表单上触发提交事件，这就是

ng submit

指令侦听的内容。我们也要这样做：

<input type="submit" value="Submit" id="submitjobform_submit" class="btn btn-danger">

而不是

function processForm(){...}

4） 在获取模块之前，您需要创建模块（一次）。在您的情况下，更改：

 angular.module('app.submitjob').controller...

到

演示

（函数（）{
"严格使用",；
有棱角的
.module（'app.submitjob'，[]）
.控制器（“SubmitJobController”，SubmitJobController）；
SubmitJobController.$inject=['$log']；
/*@ngInject*/
功能提交作业控制器（记录器）{
var vm=这个；
vm.title='完成下面的字段并点击submit以创建新作业'；
vm.names=[{
名称：'Kishori'，
角色：“儿童”
}, {
名称：“禅”，
角色：“儿童”
}, {
姓名：“西蒙”，
角色：“家长”
}, {
姓名：‘Nam’，
角色：“家长”
}];
激活（）；
this.processForm=函数（）{
logger.info（'awesome！'）；
};
函数激活（）{
logger.info（“已激活提交作业视图”）；
}
}
})();

名称
必修的！
描述
必修的！
类别
必修的！
受让人
必修的！
谢谢。2和3是相关的。1和4与代码中其他地方处理的不同。我忘了提到我正在使用John Papa的Hottwel生成器，它在控制器定义之外初始化模块，还使用ui路由器将控制器设置为语句。
 angular.module('app.submitjob').controller...

 angular.module('app.submitjob', []).controller...