我似乎无法解释为什么以下内容未触发表单提交。
表单有ng-submit="vm.processForm()"
<input type="button" value="Submit" id="submitjobform_submit" class="btn btn-danger">
ng-controller具有processForm功能
它是使用ui-router的嵌入式视图，但我认为只要视图本身有效，我至少会期望它触发页面提交。
感谢任何建议！
- 西蒙
HTML code：
<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');
}
}
})
();
感谢您的帮助，
西蒙
答案 0 :(得分：1)
您的代码存在各种问题： -
1）看起来您正在尝试使用控制器As语法，在这种情况下，您需要在ng-controller指令中指定它。即：ng-controller="SubmitJobController as vm"。您似乎正在尝试访问前缀为vm的属性（如果不是，则必须在$scope上设置
2）输入类型type="button"不会触发表单提交，您需要将其更改为type="submit"，以便在表单上触发提交事件，这是ng-submit指令听。所以：
<input type="submit" value="Submit" id="submitjobform_submit" class="btn btn-danger">
3）您需要在控制器实例上设置该功能（因为您使用的是控制器，否则需要在$scope上设置并对视图进行适当的更改），即：
this.processForm = function() {
logger.info('awesome!');
};
而不是
function processForm(){...}
4）你需要在获得之前创建模块（一次）。在你的情况下改变：
angular.module('app.submitjob').controller...
到
angular.module('app.submitjob', []).controller...
<强>演示
(function() {
'use strict';
angular
.module('app.submitjob', [])
.controller('SubmitJobController', SubmitJobController);
SubmitJobController.$inject = ['$log'];
/* @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();
this.processForm = function() {
logger.info('awesome!');
};
function activate() {
logger.info('Activated Submit Job View');
}
}
})();<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section class="mainbar" ng-app="app.submitjob">
<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 as vm" 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="submit" 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>