Angular.js：表单提交操作未调用
Posted
技术标签:
【中文标题】Angular.js：表单提交操作未调用【英文标题】：Angular.js : on form submit action is not calling 【发布时间】：2016-10-30 14:46:08 【问题描述】：我正在尝试在 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")
.controller("autoQuoteCtrl", ["$http","$state","dtoResource",autoQuoteCtrl]);
function autoQuoteCtrl($http,$state,dtoResource)
console.log('We are in form');
//self = this;
// if valid (check form validate true)
//console.log(dtoResource);
//call function from your service, and do something with it
dtoResource.rc1Step1DTO();
$http(
method : 'POST',
url : 'api.php',
data : dtoObj: JSON.stringify(prepareAutoQuoteDTO.postAutoQuoteObj) , // pass in data as strings
headers : 'Content-Type': 'application/x-www-form-urlencoded' // set the headers so angular passing info as form data (not request payload)
)
.success(function(data)
console.log(data);
if (!data.success)
else
// if successful, bind success message to message
//$scope.message = data.message;
);
());
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-submit 使用函数ng-submit="submit()" 检查 DOCS docs.angularjs.org/api/ng/directive/ngSubmit
【参考方案1】：
您必须为父 DOM 元素添加 ng-app 和 ng-controller 属性。
你不能在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：在这个例子中，我使用了 co 称为范围汤。这很容易理解，但它使用附加属性将 $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()">
我忘记了第一个示例中的()，抱歉:)
【讨论】：
有没有办法在不使用 的情况下提交表单 @Greatym.com 恐怕不会。 AngularJs 劫持 我按照建议更新了 step1.php 文件，但出现错误 Error: [$injector:unpr] Unknown provider: $resourceProvider 表示没有找到dtoResource。检查它是否以角度注册。与注册控制器和模块类似。像这样：angular .module("autoQuote") .service("dtoResource", [dependencies...])
我暂时删除了这个 dtoResource。更新文件，代码如下，但点击保存按钮时没有发生任何事件。【参考方案2】：
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');
]);
click here
【讨论】：
得到错误错误：[$injector:unpr] 未知提供者：$resourceProvider以上是关于Angular.js：表单提交操作未调用的主要内容，如果未能解决你的问题，请参考以下文章
当表单出现错误时，带有 angular.js 表单提交的 Django 不起作用
Angular JS - 如果使用 HTML 元素成功提交表单，则通知用户