我确定我忽略了一些非常简单的东西,但请耐心等待,因为我是一名新程序员。
我已经使用materializecss创建了一个表单,但是当我单击提交按钮时,控制器中的sendMail函数未被调用(因此未发送消息)。 有人可以帮助我吗? 谢谢!
<div class="section white" id="prayerRequest">
<div class="row">
<div class="col s12 m12 l12">
<h1 class="header center deepBrownT">Prayer Request</h1>
</div>
</div>
<div class="row">
<form name="contactForm" ng-submit="Home.sendMail()" class="col s12">
<div class="row">
<div class="input-field col s6">
<input type="text" class="validate" ng-model="Home.contactName">
<label for="name">Name</label>
</div>
<div class="input-field col s6">
<input type="email" class="validate" ng-model="Home.contactEmail">
<label for="email">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea class="materialize-textarea" ng-model="Home.contactMsg"></textarea>
<label for="textarea1">Prayer Request</label>
</div>
</div>
</div>
</div>
<div class="center">
<button class="btn waves-effect waves-light" type="submit">Submit
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
这是控制器:
angular.module('theWell')
.controller('HomeController', HomeController)
HomeController.$inject = ['$location', '$anchorScroll', '$http']
function HomeController ($location, $anchorScroll, $http) {
var vm = this;
vm.scrollTo = function(scrollLocation) {
$location.hash(scrollLocation);
$anchorScroll();
}
vm.sendMail = function () {
var data = ({
contactName : vm.contactName,
contactEmail : vm.contactEmail,
contactMsg : vm.contactMsg
});
console.log(data)
// Simple POST request example (passing data) :
$http.post('http://localhost:3000/api/prayerRequest', data).
success(function(data, status, headers, config) {
// vm callback will be called asynchronously
// when the response is available
Materialize.toast('Thanks for your message ' + data.contactName + "." + " Our prayer team will be in conctact with you shortly");
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}
我知道控制器工作,因为$anchorScroll工作。
感谢您的帮助!
我相信
问题可能是您的 HTML 无效。尝试将 HTML 更新为:
<div class="section white" id="prayerRequest">
<div class="row">
<div class="col s12 m12 l12">
<h1 class="header center deepBrownT">Prayer Request</h1>
</div>
</div>
<div class="row">
<form name="contactForm" ng-submit="Home.sendMail()" class="col s12">
<div class="row">
<div class="input-field col s6">
<input type="text" class="validate" ng-model="Home.contactName"/>
<label for="name">Name</label>
</div>
<div class="input-field col s6">
<input type="email" class="validate" ng-model="Home.contactEmail"/>
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea class="materialize-textarea" ng-model="Home.contactMsg"></textarea>
<label for="textarea1">Prayer Request</label>
</div>
</div>
</div>
</div>
<div class="center">
<button class="btn waves-effect waves-light" type="submit">Submit
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>