[英]Angular.js : on form submit action is not calling
我正在嘗試在ng-submit事件上提交表單,但是表單提交不起作用。 $ http,$ state,dtoResource是注入,其中dtoResource是工廠,用於修改json數據。
我的代碼如下
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
電子郵件: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
(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; } }());
您必須將ng-app
和ng-controller
屬性添加到父DOM元素。
而且您不能在ng-submit
調用控制器的實例:)
您應該在控制器中添加特殊方法,然后調用該方法。 像這樣
<body ng-app>
<div ng-controller="autoQuoteCtrl">
<form ng-submit="onSubmit()">
...
</form>
</div>
</body>
和你的控制器是這樣的
angular
.module("autoQuote")
.controller("autoQuoteCtrl", ["$http","$state","dtoResource", function($http, $state, dtoResource) {
$scope.onSubmit = function() {
alert('hi, I was invoked on form submit');
};
}]);
PS:在此示例中,我使用的是合並范圍湯。 理解起來很簡單,但是它會將$ scope與其他屬性組合在一起。 現在不建議使用此方法。 在此處閱讀有關更好方法的信息: http : //www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html
更新
您的代碼有些混亂:路由重定向到/,被questionsCtrl
捕獲,但是相關的模板具有ng-controller=autoQuoteCtrl
屬性。 那么應該使用哪個控制器來響應用戶的動作呢? 不確定是否打算這樣做:)
解
提交函數應該像這樣被調用
<form ng-submit="onSubmit()">
我在第一個示例中忘記了()
,對不起:)
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>
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.