2015-09-10 32 views
0

有人可以幫助我,我想升級這個頁面到最新版本的角度,但由於某種原因它不工作,我試過定義控制器,而不是他們的功能,但後來我失去了,我已經建立了我所有的錯誤信息...... JavaScript是不是我的最強技能,因此任何幫助是極大的讚賞Angular JS - v1.2.0到v1.3已經打破了我的http post從表格

<!DOCTYPE html> 
     <head> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> 
      <link rel="stylesheet" type="text/css" href="style.css"> 
     </head> 

      <!-- apply the module and controller to our body so angular is applied to that --> 
     <body ng-app="LoginformApp" ng-controller="formControllerApp"> 
      <div class="wrapper"> 

       <div class="clear"></div> 
      <form method="post" action="" ng-submit="processForm()"> 
       <div> 

      <input type="text" id="emailaddy" name="email" placeholder="Email" ng-model="formData.email"> <br> <!-- attach ng to the form input --> 
       <span class="help-block" ng-show="errorEmail">{{ errorEmail }}</span> 
       </div> 
       <div> 
        <label class="lock" for="password"> 
        <svg viewBox="0 0 32 32"> 
         <g filter=""> 
         <use xlink:href="#lock-locker"></use> 
         </g> 
         </svg> 
        </label> 
      <input type="text" id="paww" name="password" placeholder="Password" ng-model="formData.password"> <br> <!-- attach ng to the form input --> 
       <span class="help-block" ng-show="errorPassword">{{ errorPassword }}</span> 
       </div> 
       <div> 
      <input type="submit" id="followbtn" name="submit" placeholder="Login"> <br> 
       </div> 

      </form> 

      <!-- <pre> 
       {{ formData }} 
      </pre> --> 

      <div class="responsebox"> 
      {{ message }} 
      <!-- ajax success response here --> 
      </div> 
      </div> 
      <script type="text/javascript"> 
       // define angular module/app 
      var formApp = angular.module('LoginformApp', []); 

      // create angular controller and pass in $scope and $http 
      function formControllerApp($scope, $http) { 

       // create a blank object to hold our form information 
       // $scope will allow this to pass between controller and view 
       $scope.formData = {}; 
       // process the form 
       $scope.processForm = function() { 
       $http({ 
       method : 'POST', 
       url  : 'http://example.com/parse-login.php', 
       data : $.param($scope.formData), // pass in data as strings 
       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) { 
        // if not successful, bind errors to error variables 
        $scope.errorEmail = data.errors.email; 
        $scope.errorPassword = data.errors.password; 
        //$scope.errorSuperhero = data.errors.superheroAlias; 
        } else { 
        // if successful, bind success message to message 
        $scope.message = data.message; 
        } 
       }); 
       }; 
      } 
      </script> 
     </body> 
    </html> 
+0

您正在使用什麼版本的1.3,1.3.0?你知道這還是一年嗎?我總是建議閱讀更新日誌以查看是否有任何重大更改:https://github.com/angular/angular.js/blob/master/CHANGELOG.md – SteveEdson

+1

此語法不適用於角度1.3。見http://stackoverflow.com/questions/29149665/why-does-ng-controller-not-work-with-function-this-this-example – Claies

回答

0

試試下面的代碼:

<!DOCTYPE html> 
      <head> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 
      <link rel="stylesheet" type="text/css" href="style.css"> 


      </head> 



      <!-- apply the module and controller to our body so angular is applied to that --> 
      <body ng-app="LoginformApp" ng-controller="formControllerApp"> 


      <div class="wrapper"> 

       <div class="clear"></div> 
      <form method="post" action="" ng-submit="processForm()"> 
       <div> 

      <input type="text" id="emailaddy" name="email" placeholder="Email" ng-model="formData.email"> <br> <!-- attach ng to the form input --> 
       <span class="help-block" ng-show="errorEmail">{{ errorEmail }}</span> 
       </div> 
       <div> 
        <label class="lock" for="password"> 
        <svg viewBox="0 0 32 32"> 
         <g filter=""> 
         <use xlink:href="#lock-locker"></use> 
         </g> 
         </svg> 
        </label> 
      <input type="text" id="paww" name="password" placeholder="Password" ng-model="formData.password"> <br> <!-- attach ng to the form input --> 
       <span class="help-block" ng-show="errorPassword">{{ errorPassword }}</span> 
       </div> 
       <div> 
      <input type="submit" id="followbtn" name="submit" placeholder="Login"> <br> 
       </div> 

      </form> 

      <!-- <pre> 
       {{ formData }} 
      </pre> --> 

      <div class="responsebox"> 
      {{ message }} 
      <!-- ajax success response here --> 
      </div> 


      </div> 




      <script type="text/javascript"> 
       // define angular module/app 
      var formApp = angular.module('LoginformApp', []); 

      // create angular controller and pass in $scope and $http 
      formApp.controller("formControllerApp",['$scope','$http', function formControllerApp($scope, $http) { 

       // create a blank object to hold our form information 
       // $scope will allow this to pass between controller and view 
       $scope.formData = {}; 
       // process the form 
       $scope.processForm = function() { 
       $http({ 
       method : 'POST', 
       url  : 'http://example.com/parse-login.php', 
       data : $.param($scope.formData), // pass in data as strings 
       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) { 
        // if not successful, bind errors to error variables 
        $scope.errorEmail = data.errors.email; 
        $scope.errorPassword = data.errors.password; 
        //$scope.errorSuperhero = data.errors.superheroAlias; 
        } else { 
        // if successful, bind success message to message 
        $scope.message = data.message; 
        } 
       }); 
       }; 
      }]); 

      </script> 






      </body> 


      </html>