Angular ajax提交表單

Question

我有ajax提交表單與角度的問題，當我點擊提交我的整個頁面重新加載？

哪裏是問題，這裏是我的代碼

/* 
Create the controller and inject Angular's $scope 
*/ 

// resource2Controller 
(function() { 
    'use strict'; 
    angular.module("aluPlanetApp").controller('resource2Controller', resource2Controller); 
    resource2Controller.$inject = ['$scope']; 
    resource2Controller.$inject = ['$http']; 

    function resource2Controller($scope, $http) { 

     activate(); 

     function activate() { 

      $scope.title = 'Contact'; 
      $scope.id = '2'; 
      $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 <img src="http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> Please fill out all the fields.'; 
        $scope.result = 'bg-danger'; 
       } 
      } 
     } 
    } 
})(); 

而且接觸form.php的

<?php 
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('something@test.com'); //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); 

} 

HTML

<div ng-controller="resource2Controller" 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" > 
          </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> 

Answer 1

MHH我相信那也許你的問題是在我現在看不到的HTML中，請確保您沒有使用提交按鈕。我的意思是<input type="submit"...使用<input type="button"...相反這是一個參考How do I make an HTML button not reload the page

Answer 2

在你的HTML，你打電話給控制器的ContactController而在角邊你怎麼稱呼它resource2Controller。這兩個應該匹配，否則Angular不知道該怎麼做。