javascript — угловой js с триггером php — ng-click без физического клика

Я просто программирую контактную форму с угловым JS и PHP.

Это работает, но мне нужна ваша помощь для одной функции.

на плункере вы найдете работоспособную версию: https://plnkr.co/edit/4zeDV3sCVXIbVShGkVFe?p=preview

Я реализовал кнопку переключения с угловой JS. Он по-прежнему работает нормально, но я хочу закрыть его, когда я получаю «success = true» из сценария php, а не когда я нажимаю на него. Таким образом, он автоматически закрывается, когда сообщение было успешно отправлено. Я попробовал это с помощью ng-click и функции, но я не знаю, как вызвать угловую функцию с другим значением.

app.controller('ToggleCtrl', function ($scope) {
$scope.sichtbar = false;
$scope.toggle = function() {
$scope.sichtbar = !$scope.sichtbar;
};
}); app.controller('ContactController', function ($scope, $http) {
$scope.result = 'hidden'
$scope.resultMessage;
$scope.resultMessage1;
$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     : '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.resultMessage1 = data.message;
$scope.errorName = data.errors.name;
$scope.result='bg-danger';
}
});
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Bitte alles ausfuellen (rot makiert)';
$scope.result='bg-danger';
}
}`
<div ng-controller="ToggleCtrl">
<button class="btn btn-primary btn-sm" ng-click="toggle()">Want to contact us directly????</button>
<div ng-show="sichtbar"><div class="container" ng-controller="ContactController">
<div class="col-md-6 col-md-offset-3">
<form ng-submit="submit(contactform)" name="contactform" method="post" action="" role="form">
<div class="form-group" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
<label for="inputName" >Name</label>
<input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="Your Name" required>
</div><div class="form-group" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
<label for="inputEmail" >Email</label>
<input ng-model="formData.inputEmail" autocomplete="on" type="email" class="form-control" id="inputEmail" autofocus name="inputEmail" placeholder="Your Email" required>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }">
<label for="inputSubject" >Subject</label>
<input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
<label for="inputMessage" >Message</label>
<textarea ng-model="formData.inputMessage" class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..." required></textarea>
</div>
<button type="submit" class="btn btn-success btn-lg btn-block" ng-disabled="submitButtonDisabled">
Send Message?
</button>
</form>
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once 'phpmailer/PHPMailerAutoload.php';

//check if any of the inputs are empty
if (empty($_POST['inputName']) || empty($_POST['inputEmail']) || empty($_POST['inputSubject']) || empty($_POST['inputMessage'])) {
$data = array('success' => false, 'message' => 'Bitte alles ausfuellen');
echo json_encode($data);
exit;
}

//create an instance of PHPMailer
$mail = new PHPMailer();$mail->IsSMTP(); // enable SMTP
$mail->SMTPAuth = true; // au<a href="contact-form.php">No Title</a>thentication enabled
$mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for GMail
$mail->Host = "smtp.gmail.com";
$mail->Port = 465; // or 587
$mail->IsHTML(true);$mail->From = $_POST['inputEmail'];
//$mail->FromName = $_POST['inputName'];
$$mail->Subject = $_POST['inputSubject'];
$mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\nMessage: " . stripslashes($_POST['inputMessage']);

if (isset($_POST['ref'])) {
$mail->Body .= "\r\n\r\nRef: " . $_POST['ref'];
}

if(!$mail->send()) {
$data = array('success' => false, 'message' => 'Fehler: Mailer Error: ' . $mail->ErrorInfo);
echo json_encode($data);
exit;
}
$data = array('success' => true, 'message' => 'Thanks ');
echo json_encode($data);

Есть идеи? Большое спасибо.

0

Решение

Спасибо за вашу помощь, я исправил это:
я добавил код ниже, чтобы вызвать кнопку автоматически.

$timeout(function() {
var el = document.getElementById('btn123');
angular.element(el).triggerHandler('click');
}, 0);
0

Другие решения

Пара вещей:

  1. Ваш HTML-код недействителен, отсутствует два закрытия </div> теги.
  2. Вам нужно обработать ошибку http (например, в plunkr запрос не проходит, поэтому вам нужен обратный вызов «error»).
  3. Чтобы закрыть форму на успех, просто поставьте $scope.toggle(); в вашем успехе обратный вызов. Вы можете сделать это, потому что ContactController наследуется от ToggleController, поэтому функция переключения будет доступна на обоих контроллерах.
0