Не удается отобразить {{сообщение об успехе}} в Angular

Question

Не удается отобразить {{сообщение об успехе}} в Angular

0

Я пытаюсь реплицировать эту форму http://sunzhen.blogspot.com/2014/08/angularjs-contact-form-with-bootstrap.html и смог получить электронные письма для отправки, но я не получаю ошибку и успех сообщения из файла contact-form.php. Мне пришлось изменить структуру файла, чтобы он соответствовал моему сайту, но это ни в чем не повлияет. Я обнаружил, что используя Angular 1.2.16, как они используют, я получаю сообщение об успехе, но при использовании последней версии Angular я этого не делаю. Может ли кто-нибудь сказать, изменилось ли что-то в более новых версиях Angular, которые могли бы вызвать такое поведение? Вот код http://plnkr.co/edit/Skj5r6WFfDQajkPuyzxT

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once 'phpmailer/PHPMailerAutoload.php';

if (isset($_POST['inputName']) && isset($_POST['inputEmail']) && isset($_POST['inputSubject']) && isset($_POST['inputMessage'])) {

    //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' => 'Please fill out the form completely.');
        echo json_encode($data);
        exit;
    }

    //create an instance of PHPMailer
    $mail = new PHPMailer();

    $mail->From = $_POST['inputEmail'];
    $mail->FromName = $_POST['inputName'];
    $mail->AddAddress('[email protected]'); //recipient 
    $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' => 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo);
        echo json_encode($data);
        exit;
    }

    $data = array('success' => true, 'message' => 'Thanks! We have received your message.');
    echo json_encode($data);

} else {

    $data = array('success' => false, 'message' => 'Please fill out the form 

completely.');
        echo json_encode($data);

    }

controller.js

app.controller('ContactController', function ($scope, $http) {
$scope.result = 'hidden'
$scope.resultMessage;
$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.result='bg-danger';
            }
        });
    } else {
        $scope.submitButtonDisabled = false;
        $scope.resultMessage = 'Failed :( Please fill out all the fields.';
        $scope.result='bg-danger';


    }
    }
});

HTML

<!DOCTYPE html>
<html>

<head>
  <title>AngularJS Contact Form with Bootstrap and PHPMailer</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
  <script src="app.js"></script>
  <script src="controllers.js"></script>
</head>

<body ng-app="contactApp">
  <div class="vertical-middle">
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2 class="panel-title">Contact Form</h2>
        </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>
</body>

</html>

jfoutch 04 нояб. 2015, в 04:18

Источник

1

Я не могу понять это сейчас, но вы можете взглянуть на документы о миграции :)
Rodmentou 04 нояб. 2015, в 02:40
0

Хорошо, я сделаю это спасибо
jfoutch 04 нояб. 2015, в 02:45
0

нужно изменить эту строку $ scope.resultMessage = data.data.message; вместо $ scope.resultMessage = data.message;
Shohel 04 нояб. 2015, в 03:41

Показать ещё 1 комментарий

Теги:

php

javascript

angularjs

twitter-bootstrap-3

2 ответа

Ещё вопросы

Я не могу понять это сейчас, но вы можете взглянуть на документы о миграции :)
нужно изменить эту строку $ scope.resultMessage = data.data.message; вместо $ scope.resultMessage = data.message;

Shohel · Answer 1 · 2015-11-04T01-28-00.000Z

Вам нужно исправить код отправки электронной почты на php. Я думаю, что у него есть некоторая ошибка. если вы исправите это, вы получите результат. ваша коррекция выглядит так. Я добавил метод обработчика ошибок.

$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.data.message;
          $scope.result = 'bg-success';
        } else {
          $scope.submitButtonDisabled = false;
          $scope.resultMessage = data.data.message;
          $scope.result = 'bg-danger';
        }
      }).error(function(error, status) {
        $scope.submitButtonDisabled = false;
        $scope.resultMessage = 'Failed :( Please fill out all the fields.';
        $scope.result = 'bg-danger';
      });

Спасибо, но у меня это не сработало. Я получаю "{{сообщение об успехе}}" после обновления страницы.
Вы исправили свой PHP-код. почта идет?

ramamoorthy_villi · Answer 2 · 2015-11-04T00-29-00.000Z

Фактически, то, что вы получаете от обратного вызова, это response включая сведения о заголовке. Попробуй это.

        .........  
        }).success(function(response){
            console.log(response);
            if (response.data.success) { 
                $scope.submitButtonDisabled = true;
                $scope.resultMessage = response.data.message;
                $scope.result='bg-success';
            } else {
                $scope.submitButtonDisabled = false;
                $scope.resultMessage = response.data.message;
                $scope.result='bg-danger';
            }
         ..........

Спасибо, я попробую это здесь в ближайшее время
Там нет изменений после внесения этого изменения. Удалось ли вам попасть на работу в вантуз?