Php 发送表单时未使用AngularJS控制器

我已经创建了一个使用AngularJS的表单，其中您应该有一个两步预订表单（两步都在同一表单中）。我想使用PhpMailer发送表单

设置好所有内容后，我现在想发送邮件，但当我在表单中填写完所有必需的信息后点击“发送”按钮时，网页会刷新，不会发送任何电子邮件

我已在contactController中放置了警报消息，以了解文件是否已执行，但未显示警报

现在我似乎不明白为什么我的contactController在被submit按钮调用时不能工作/调用

你可以自己看看，以确认我刚才所说的是正确的

另外，我对AngularJS还相当陌生，这是我使用该平台构建的第二个应用程序

HOME/INDEX.HTML

    <div class="alert alert-info" role="alert">
  You can also call us for any questions, or to make a reservation for your e-scooter <a href="tel:31611152220">  <i class="fas fa-phone"></i>+31611152220</a>
</div>
<div class="container" id="item-1" >
  <div class="card text-center">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item" id="cardLinkOne" onclick="activeCardOne(this)">
          <a class="nav-link active" id="navLinkOne"><img src="assets/images/scooter-white.png" alt=""><br>Scooter White</a>
        </li>
        <li class="nav-item" id="cardLinkOne" onclick="activeCardTwo(this)">
          <a class="nav-link" id="navLinkTwo"><img src="assets/images/scooter-black.png" alt=""><br>Scooter Black </a>
        </li>
      </ul>
    </div>

    <!-- <div class="ng-scope" ng-include="'scooterWhiteMail.html'"></div> -->
  <div ng-app="contactApp" >
    <div class="card-body cardView" id="cardBodyOne" ng-controller="ContactController" >
      <img class="card-img-top" src="https://www.lastprice.co.il/uploadimages/MiScooter.png" alt="Card image cap">
      <h5 class="card-title">Scooter White</h5>

      <div class="progress">
        <div class="progress-bar progress-bar-white" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

      <form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">

        <div class="steps stepOneWhite" id="stepOne">
          <div class="form-group">
            <select ng-model="formData.inputSelector" id="inputSelector" name="inputSelector" type="text" class="form-control" name="scooters">
              <option value="halfHour">1 / 2 hour = 20,-</option>
              <option value="oneDay">1 day = 30,-</option>
              <option value="twoDays">2 days = 55,</option>
              <option value="threeDays">3+ dagen = +20</option>
            </select>
          </div>
          <h2>Pick up</h2>
          <input ng-model="formData.inputDateOne" id="inputDateOne" name="inputDateOne" class="date" type="date" value="2018-07-15" min="2018-01-01" max="2018-12-31">
          <input ng-model="formData.inputTimeOne" id="inputTimeOne" name="inputTimeOne" class="time" type="time" value="09:45:00" required>
          <h2>Return</h2>
          <input ng-model="formData.inputDateTwo" id="inputDateTwo" name="inputDateTwo" class="date" type="date" value="2018-07-22" min="2018-01-01" max="2018-12-31" required>
          <input ng-model="formData.inputTimeTwo" id="inputTimeTwo" name="inputTimeTwo" type="time" class="time" value="23:45:00" required>
        </div>
        <div class="steps stepTwoWhite" id="stepTwo">
          <h2>Your Information</h2>
          <div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
            <div class="col-lg-10">
              <input ng-model="formData.inputName" type="text" class="form-control  inputForm fa fa-input" id="inputName" name="inputName" placeholder="&#xf007" required>
            </div>
          </div>

          <div class="form-group col-lg-6" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
            <div class="col-lg-10">
              <input ng-model="formData.inputEmail" type="email" class="form-control inputForm fa fa-input" id="inputEmail" name="inputEmail" placeholder="&#xf0e0" required>
            </div>
          </div>

          <div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputNumber.$invalid && submitted }">
            <div class="col-lg-10">
              <input ng-model="formData.inputNumber" type="number" class="form-control inputForm fa fa-input" id="inputNumber" name="inputNumber" placeholder="&#xf095" required>
            </div>
          </div>
        </div>
        <button type="submit" id="submitInput" class="btn btn-primary btn-lg btn-block submitInputWhite" ng-disabled="submitButtonDisabled">Rent!</button>
        <span id="rentButton" class="btn btn-primary btn-lg btn-block rentButtonWhite" onclick="rentNowWhite()">Rent!</span>
      </form>
       <!-- <p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p> -->
      <ul class="list-group list-group-flush">
        <li class="list-group-item"><i class="fas fa-check"></i> Insurance included</li>
        <li class="list-group-item"> <i class="fas fa-check"></i> Accept credit card and cash</li>
        <li class="list-group-item"> <i class="fas fa-check"></i> Available in Amsterdam</li>
      </ul>

    </div>
  </div>
    <div class="card-body" id="cardBodyTwo">
      <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/51Qtg4L%2BJmL._SX425_.jpg" alt="Card image cap">
      <h5 class="card-title">Scooter Black</h5>

      <div class="progress">
        <div class="progress-bar progress-bar-black" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

      <form >
        <div class="steps  stepOneBlack" id="stepOne">
          <div class="form-group">
            <select class="form-control" name="scooters">
              <option value="halfHour">1 / 2 hour = 20,-</option>
              <option value="oneDay">1 day = 30,-</option>
              <option value="twoDays">2 days = 55,</option>
              <option value="threeDays">3+ dagen = +20</option>
            </select>
          </div>
          <h2>Pick up</h2>
          <input class="date" type="date" value="2018-07-15" min="2018-01-01" max="2018-12-31">
          <input class="time" type="time" value="09:45:00">
          <h2>Return</h2>
          <input class="date" type="date" value="2018-07-22" min="2018-01-01" max="2018-12-31">
          <input class="time" type="time" value="23:45:00">
        </div>
        <div class="steps stepTwoBlack" id="stepTwo">
          <h2>Your Information</h2>
          <div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
            <div class="col-lg-10">
              <input ng-model="formData.inputName" type="text" class="form-control  inputForm fa fa-input" id="inputName" name="inputName" placeholder="&#xf007" required>
            </div>
          </div>

          <div class="form-group col-lg-6" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
            <div class="col-lg-10">
              <input ng-model="formData.inputEmail" type="email" class="form-control inputForm fa fa-input" id="inputEmail" name="inputEmail" placeholder="&#xf0e0" required>
            </div>
          </div>

          <div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputNumber.$invalid && submitted }">
            <div class="col-lg-10">
              <input ng-model="formData.inputNumber" type="number" class="form-control inputForm fa fa-input" id="inputNumber" name="inputNumber" placeholder="&#xf095" required>
            </div>
          </div>
        </div>
        <button  submitInputBlack"  class="btn btn-primary btn-lg btn-block" >Rent!</button>
        <span id="rentButton rentButtonBlack" class="btn btn-primary btn-lg btn-block" onclick="rentNowBlack()">Rent!</span>
      </form>

      <ul class="list-group list-group-flush">
        <li class="list-group-item"><i class="fas fa-check"></i> Insurance included</li>
        <li class="list-group-item"> <i class="fas fa-check"></i> Accept credit card and cash</li>
        <li class="list-group-item"> <i class="fas fa-check"></i> Available in Amsterdam</li>
      </ul>

    </div>
  </div>
</div>
<div class="jumbotron jumbotron-fluid" id="item-2">
  <div class="container">
    <h1 class="display-4">About Us</h1>
    <!--     <p class="lead">You can drive up to 90km with a full battery.</p> -->
  </div>
</div>
<div class="container" id="item-2">
  <div class="card text-center">
    <!--    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs"> 
        <li class="nav-item" id="cardLinkOne"  onclick="activeCardThree(this)">
          <a class="nav-link active" id="navLinkThree"><br>E City Wheels</a>
        </li>
        <li class="nav-item" id="cardLinkOne" onclick="activeCardFour(this)">
          <a class="nav-link" id="navLinkFour"><br>Ophaalservice</a>
        </li>
      </ul>
    </div>-->
    <div class="card-body cardView" id="cardBodyThree">
      <h5 class="card-title">E City Wheels</h5>
      <p class="card-text">Staying a day or weekend in Amsterdam? Explore the city in a unique way with an electric three-wheeler from E City Wheels. With our unique electric tricycle we are the only one in Amsterdam that they rent out.<br>
<br>
With a battery duration that can cover a distance of up to 80 km and a maximum speed of 25 km per hour. You can visit all the nice commercials of Amsterdam in no time. Our electric three wheelers are very safe because they stabilize themselves, so you do not need a helmet or driver's license.<br>
<br>
For renting the electric three wheelers you can visit our visit address at hotel Camp Inn Amsterdam.
</p>
    </div>
    <!--     <div class="card-body" id="cardBodyFour" > 
      <h5 class="card-title">Ophaalservice</h5>
      <p class="card-text">De scooters van E City Wheels staat gepubliceerd en worden aangeboden voor verhuur bij hotel Camp Inn Amsterdam. Het hotel is centraal gelegen aan alle stadsdelen en slechts 4km van het centrum. U kunt een scooter bij het hotel huren of gebruik maken van onze ophaal en bezorg service.<br><br>

      Voor de verhuur van een scooter vragen wij een geldige legitimatiebewijs. Ook vragen wij een borg van 150( euro), de borg kan per pin, cash of creditcard worden voldaan. De borg ontvangt u volledig terug wanneer de scooter in dezelfde goede conditie wordt terug gebracht zoals van ons ontvangen.<br><br>

      Voor de ophaal/bezorg service leveren wij ook op locatie als u zich in Amsterdam bevindt. U telefonisch een E-scooter bestellen om te huren. Aan deze service zijn extra kosten verbonden, zie tarieven.<br><br>

      Bezorg en ophaal kosten E scooter in Amsterdam 25( euro).<br><br>

      Wil u alleen gebruik maken van een dienst, ophalen of bezorgen deze kosten bedragen 15 ( euro)<br><br>

      Willem de zwijgerlaan 350<br><br>

      1055 RD Amsterdam<br><br>

      <a href="">+31 6 111 522 20</a><br><br>

      info@e-citywheels.com</p>
    </div>-->
  </div>
</div>
<div class="container" id="contactForm"> 
  <h1>Contact us!</h1>
  <p>You can send us an Email to :</p>
  <a href="mailto:info@E-CityWheels.com">info@E-CityWheels.com</a>
<!--   <div ng-controller="ContactController" class="panel-body"> 
    <form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">
      <div class="row">
        <div class="form-group col-lg-3  offset-lg-3" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
          <div class="col-lg-10">
            <input ng-model="formData.inputName" type="text" class="form-control  inputForm fa fa-input" id="inputName" name="inputName" placeholder="&#xf007" required>
          </div>
        </div>
        <div class="form-group col-lg-3" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
          <div class="col-lg-10">
            <input ng-model="formData.inputEmail" type="email" class="form-control inputForm fa fa-input" id="inputEmail" name="inputEmail" placeholder="&#xf0e0" required>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="form-group col-lg-3  offset-lg-3" ng-class="{ 'has-error': contactform.inputNumber.$invalid && submitted }">
          <div class="col-lg-10">
            <input ng-model="formData.inputNumber" type="number" class="form-control inputForm fa fa-input" id="inputNumber" name="inputNumber" placeholder="&#xf095" required>
          </div>
        </div>
        <div class="form-group col-lg-3" ng-class="{ 'has-error': contactform.inputGuests.$invalid && submitted }">
          <div class="col-lg-10">
            <input ng-model="formData.inputGuests" type="number" class="form-control inputForm fa fa-input" id="inputGuests" name="inputGuests" placeholder="&#xf234" required>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="form-group col-lg-3  offset-lg-3 form-message" ng-class="{ 'has-error': contactform.inputDate.$invalid && submitted }">
          <div class="col-lg-10">
            <input ng-model="formData.inputDate" type="datetime-local" class="form-control inputForm fa fa-input" id="inputDate" name="inputDate" placeholder="Your Date" required>
          </div>
        </div>
        <div class="form-group col-lg-9 offset-lg-2 form-message" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
          <div class="col-lg-10">
            <textarea ng-model="formData.inputMessage" class="form-control inputForm fa fa-input" rows="4" id="inputMessage" name="inputMessage" placeholder="&#xf075" required></textarea>
          </div>
        </div>
        <div class="form-group col-lg-9 offset-lg-3">
          <div class="col-lg-offset-2 col-lg-10">
            <button type="submit" id="submitInput" class="btn btn-primary btn-lg btn-block " ng-disabled="submitButtonDisabled">
                                       Send
                                    </button>
          </div>
        </div>
      </div>
    </form>
    <p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
  </div>-->
</div>

<!doctype html>
<html ng-app="project">
<title>e-citywheels</title>
<meta name="author" content="Salman Mohamed">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="“description">
  <meta name="keywords" content="scooters,electronic,electronic scooters,Amsterdam, Rotterdam, Markthal">
  <head>
<!-- Bootstrap 4  -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!--  FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- Scripts   -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-resource.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-route.min.js">
   </script>



    <link rel="stylesheet" href="assets/styles/app.css">

    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
    <script src="assets/scripts/project.js"></script>
    <script src="assets/scripts/project-list.js"></script>
    <script src="assets/scripts/routes.js"></script>
    <script src="assets/scripts/app.js"></script>
    <script src="mail/controllers.js">
    </script>

    <nav class="navNav" ng-include="'shared/navigation.html'"></nav>
  </head>
  <body>
    <div ng-view ></div>
    <footer ng-include="'shared/footer.html'"></footer>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=grey&always=1&showNoConsent=1"></script>
  <script src="assets/scripts/scripts.js"></script>
  </body>
</html>

  [1]: http://lebakitchen.com/test/

联系表单.php

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

if (isset($_POST['inputName']) && isset($_POST['inputEmail']) && isset($_POST['inputNumber']) && isset($_POST['inputGuests']) && isset($_POST['inputDate']) && isset($_POST['inputMessage'])) {

    //check if any of the inputs are empty
    if (empty($_POST['inputName']) || empty($_POST['inputEmail']) || empty($_POST['inputNumber']) || empty($_POST['inputGuests']) || empty($_POST['inputDate']) || 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('salman-1992@hotmail.com'); //recipient 
    $mail->Subject = "Nieuwe reservering is binnengekomen";
    $mail->Body = "Nieuwe reservering:". "\r\n\r\nNaam: " . $_POST['inputName'] . "\r\n\r\nTelefoonnummer: " . $_POST['inputNumber'] ."\r\n\r\nAantal Gasten: " . $_POST['inputGuests'] ."\r\n\r\nDatum: " . $_POST['inputDate'] . "\r\n\r\nBericht: " . 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);

}

---

根据您提供的代码，您的控制器似乎从未初始化过

您是否告诉angular运行，然后初始化“app”变量；像

angular.module（'contactApp'，[]）.run（）；
var app=角度模块（'contactApp'）；
应用程序控制器（'ContactController'，函数（$scope…

另外，html标题中是否包含angular、jquery和controllers.JS脚本？
您在哪里声明contactApp模块？在继续发送表单数据之前，首先确保您的控制器已注册。您可以通过controllerI声明的contactApp模块中的console.log语句在我的app.JS文件中进行测试使用控制台日志是指页面在提交后刷新。您不能将ng submit和表单的操作和方法一起提交。当前，表单正在被提交到操作url。注意。明白了。我要尝试一下。我将其声明为
var app=angular.module（'contactApp'））；
我也在问题中添加了index.html文件
<!doctype html>
<html ng-app="project">
<title>e-citywheels</title>
<meta name="author" content="Salman Mohamed">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="“description">
  <meta name="keywords" content="scooters,electronic,electronic scooters,Amsterdam, Rotterdam, Markthal">
  <head>
<!-- Bootstrap 4  -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!--  FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- Scripts   -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-resource.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-route.min.js">
   </script>



    <link rel="stylesheet" href="assets/styles/app.css">

    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
    <script src="assets/scripts/project.js"></script>
    <script src="assets/scripts/project-list.js"></script>
    <script src="assets/scripts/routes.js"></script>
    <script src="assets/scripts/app.js"></script>
    <script src="mail/controllers.js">
    </script>

    <nav class="navNav" ng-include="'shared/navigation.html'"></nav>
  </head>
  <body>
    <div ng-view ></div>
    <footer ng-include="'shared/footer.html'"></footer>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=grey&always=1&showNoConsent=1"></script>
  <script src="assets/scripts/scripts.js"></script>
  </body>
</html>

  [1]: http://lebakitchen.com/test/