我有一个简单的3页HTML。索引,联系和服务。我用ng-view调用模板视图html。一切都很好。我用按钮导航栏看到它们。
在contact.html中,我想使用“http://www.chaosm.net/blog/2014/05/21/angularjs-contact-form-with-bootstrap-and-phpmailer/”中的phpmailer和教程。
在我的控制器中,我将代码JS粘贴到新控制器中,并在我的html文件中使用相同的格式教程。在进行不同的测试之后,我到达控制器工作但是当我输入提交时:没有任何事情发生,也没有发送任何东西。
我在代码控制器中更改了相对于exampledomain.net/js/contact-form.php的路径。在contact-form中改变调用PHPMailerAutoload.php的路径。
在contactform.html中,我首先调用了对控制器的调用)和相同的表单示例。
在contact-form.php中,所有内容与教程相同,只是我改变了之前编写的路径)。
由于我使用ng-view,帖子表格不起作用吗?有人知道为什么contact-form.php似乎没有运行?
我拥有的唯一控制器的代码(用于路由和表单phpmailer):
//Creo modulo y su nbre + establecer function routage
var AppSol = angular.module('AppSol', ['ngRoute']);
//Configure routage
AppSol.config(function($routeProvider){
$routeProvider
//Indico links pages nav
.when ('/',{
templateUrl:'templates/home.html',
controller:''
})
.otherwise ({
redirectTo:"/"
})
.when ('/Inicio',{
templateUrl:'templates/home.html',
controller:'MainCtrl'
})
.when ('/Contacto',{
templateUrl:'templates/contacto.html',
controller:'ContactController'
})
.when ('/Servicios',{
templateUrl:'templates/servicios.html',
controller:'ServCtrl'
});
});
//Creo controller and lo injecto
AppSol.controller ('MainCtrl', function($scope){
//Probar que funciona con mensaje
$scope.titulo="MY TITLE";
});
//Creo controller and lo injecto
AppSol.controller ('ServCtrl', function($scope){
//Probar que funciona con mensaje
$scope.message='';
$scope.titulo='SECOND TITLE'
});
//Creo controller and lo injecto
AppSol.controller ('ContactController', function ($scope, $http) {
$scope.titulo='TEST1 CALL CONTACT CONTROLLER'
//$scope.result = 'Hidden'
$scope.resultMessage='Test2 with Result control - I see this mensaje.';
$scope.formData; //formData is an object holding the name, email, subject, and message
$scope.submitButtonDisabled = false;
$scope.submitted = false; //used so that form errors are shown only after the form has been submitted
$scope.submit = function(contactform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
if (contactform.$valid) {
$http({
method : 'POST',
url : 'http://exampledomain.net/test/js/contact-form.php',
data : $.param($scope.formData), //param method from jQuery
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) { //success comes from the return json object
$scope.submitButtonDisabled = true;
$scope.resultMessage = data.message;
$scope.result='bg-success';
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = data.message;
$scope.result='bg-danger';
}
});
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Failed :( Please fill out all the fields.';
$scope.result='bg-danger';
}
}
});
Of course:
<div class="jumbotron" ng-app="AppSol">
<div class="container">
<div id="corte"></div>
<div class="vertical-middle">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Contact Form</h2> <strong>{{titulo}} for test controller form</strong>
</div>
<div ng-controller="ContactController" class="panel-body">
<form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">
<div class="form-group" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
<label for="inputName" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="Your Name" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input ng-model="formData.inputEmail" type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }">
<label for="inputSubject" class="col-lg-2 control-label">Subject</label>
<div class="col-lg-10">
<input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
<label for="inputMessage" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea ng-model="formData.inputMessage" class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..." required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default" ng-disabled="submitButtonDisabled">
Send Message
</button>
</div>
</div>
</form>
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
查看正常,因此您可以向$ http承诺添加错误,并查看服务器响应是什么。