Angular.js：在表单上的提交操作未调用
[英]Angular.js : on form submit action is not calling
问题描述
I am trying to submit form on ng-submit event but form submit is not working. 
我正在尝试在ng-submit事件上提交表单，但是表单提交不起作用。 $http,$state,dtoResource are injections where dtoResource is factory which modify json data. $ http，$ state，dtoResource是注入，其中dtoResource是工厂，用于修改json数据。
My code is as below 我的代码如下
index.html index.html
<!DOCTYPE html>
<html ng-app="autoQuote">
<head lang="en">
<meta charset="UTF-8">
<title>Angular Js DTO mgnt</title>
<!-- Style sheets -->
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/app.css" rel="stylesheet"/>
<!-- Library Scripts -->
<script src="js/jquery.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-ui-router.js"></script>
<!-- Application Script -->
<script src="app/app.js"></script>
<!-- Services -->
<script src="common/services/common.services.js"></script>
<script src="common/services/dtoResource.js"></script>
<!-- Controllers -->
<script src="app/ctrl/autoQuoteCtrl.js"></script>
<script src="app/ctrl/questionsCtrl.js"></script>
</head>
<body>
<ul>
<li><a href="#/">step 1</a>
<li><a href="#/step2">step 2</a>
</ul>
<div class="container">
<div ui-view=""></div>
</div>
</body>
</html>
step1.html step1.html
电子邮件：
autoQuoteCtrl.js autoQuoteCtrl.js
(function () {
"use strict";
angular
.module("autoQuote")
.factory("dtoResource",
["$resource",
dtoResource]);
console.log('inside dtoResource');
function dtoResource(){
var prepareAutoQuoteDTO = {
postAutoQuoteObj : $.getAutoQuoteObject(),
initializeDriverObj: function(){
var driverLocObj = new Driver();
driverLocObj.PersonInfo = new PersonInfo();
driverLocObj.DriverLicense = new DriverLicense();
driverLocObj.Incident = new Incident();
return driverLocObj;
},
initializeAppInfo: function(){
var appInfoLocObj = new ApplicationInfo();
appInfoLocObj.Discount = new Discount();
return appInfoLocObj;
},
/*
* Initialize Vehicle object for autoQuoteDTO.js
*/
initializeVehicleObj: function(){
var vehicleLocObj = new Vehicle();
return vehicleLocObj;
},
/*
* store session info
*/
rc1Step1DTO: function(){
var emailId = $('#save_quote_email').val();
if (typeof emailId !== "undefined" && emailId && emailId != '' && emailId != 'Email Address'){
var email = new Email();
email.EmailTypeCd = 'PRIMARY';
email.EmailAddress = emailId;
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
}
}
};
return prepareAutoQuoteDTO;
}
}());
dtoResource.js dtoResource.js
(function () { "use strict"; angular .module("autoQuote") .factory("dtoResource", ["$resource", dtoResource]); console.log('inside dtoResource'); function dtoResource(){ var prepareAutoQuoteDTO = { postAutoQuoteObj : $.getAutoQuoteObject(), initializeDriverObj: function(){ var driverLocObj = new Driver(); driverLocObj.PersonInfo = new PersonInfo(); driverLocObj.DriverLicense = new DriverLicense(); driverLocObj.Incident = new Incident(); return driverLocObj; }, initializeAppInfo: function(){ var appInfoLocObj = new ApplicationInfo(); appInfoLocObj.Discount = new Discount(); return appInfoLocObj; }, /* * Initialize Vehicle object for autoQuoteDTO.js */ initializeVehicleObj: function(){ var vehicleLocObj = new Vehicle(); return vehicleLocObj; }, /* * store session info */ rc1Step1DTO: function(){ var emailId = $('#save_quote_email').val(); if (typeof emailId !== "undefined" && emailId && emailId != '' && emailId != 'Email Address'){ var email = new Email(); email.EmailTypeCd = 'PRIMARY'; email.EmailAddress = emailId; this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact(); this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = []; this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email); } } }; return prepareAutoQuoteDTO; } }());
2 个解决方案
解决方案1
2 已采纳 2016-06-28 10:26:47
You have to add ng-app and ng-controller attributes to parent DOM elements. 您必须将ng-app和ng-controller属性添加到父DOM元素。
And you can not invoke controller's instance in ng-submit :) 而且您不能在ng-submit调用控制器的实例:)
You should add special method in the controller, and call that one. 您应该在控制器中添加特殊方法，然后调用该方法。 Something like this 像这样
<body ng-app>
<div ng-controller="autoQuoteCtrl">
<form ng-submit="onSubmit()">
...
</form>
</div>
</body>
And your controller something like this 和你的控制器是这样的
angular
.module("autoQuote")
.controller("autoQuoteCtrl", ["$http","$state","dtoResource", function($http, $state, dtoResource) {
$scope.onSubmit = function() {
alert('hi, I was invoked on form submit');
};
}]);
PS: In this example I am using co called scope soup. PS：在此示例中，我使用的是合并范围汤。 It is simple to understand but it clusters the $scope with additional properties. 理解起来很简单，但是它会将$ scope与其他属性组合在一起。 It is not recommended approach now. 现在不建议使用此方法。 Read about better approach here: http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html 在此处阅读有关更好方法的信息： http : //www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html
UPDATE 更新
You have slight confusion in your code: The route redirected to /, which was caught by questionsCtrl , but the relevant template had attribute ng-controller=autoQuoteCtrl . 您的代码有些混乱：路由重定向到/，被questionsCtrl捕获，但是相关的模板具有ng-controller=autoQuoteCtrl属性。 So which controller should be then used to respond to user action?? 那么应该使用哪个控制器来响应用户的动作呢？ Not sure if that was intended :) 不确定是否打算这样做:)
SOLUTION 解
The submit function should have been called like this 提交函数应该像这样被调用
<form ng-submit="onSubmit()">
I forgot the () in the first example, sorry :) 我在第一个示例中忘记了() ，对不起:)
解决方案2
0 2016-06-28 10:24:49
html html
<div ng-controller="formCtrl">
<form name="userForm" class="well form-search" >
<input type="text" ng-model="name" class="input-medium search-query" placeholder="Name" required >
<input type="email" ng-model="email" class="input-medium search-query" placeholder="Email" required >
<input type="text" ng-model="message" class="input-medium search-query" placeholder="Message" required >
<button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)" ng-disabled="userForm.$invalid">Submit </button>
</form>
<pre ng-model="result">
{{result}}
</pre>
</div>
jsfile js文件
var app = angular.module('formExample', []);
app.controller("formCtrl", ['$scope', '$http', function($scope, $http) {
$scope.url = 'submit.php';
$scope.formsubmit = function(isValid) {
if (isValid) {
$http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message}).
success(function(data, status) {
console.log(data);
$scope.status = status;
$scope.data = data;
$scope.result = data; // Show result from server in our <pre></pre> element
})
}else{
alert('Form is not valid');
}
} }]);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.