2015-11-17 176 views
0

我有一個形式,從用戶那裏收集註冊信息,這樣定義:AngularJS表單提交

<form class="m-t-xl" ng-submit="signup(user)" novalidate> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Name" required="" ng-model="user.name"> 
      </div> 
      <div class="form-group"> 
       <input type="email" class="form-control" placeholder="Email" required="" ng-model="user.email"> 
      </div> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Company" required="" ng-model="user.company"> 
      </div> 
      <div class="form-group"> 
       <input type="password" class="form-control" placeholder="Password" required="" ng-model="user.password"> 
      </div> 
      <div class="form-group"> 
       <div class="checkbox i-checks"><label> <input type="checkbox"><i></i> Agree the terms and policy </label></div> 
      </div> 
      <button type="submit" class="btn btn-primary block full-width m-b">Register</button> 

      <p class="text-muted text-center"><small>Already have an account?</small></p> 
      <a ui-sref="login" class="btn btn-sm btn-white btn-block">Login</a> 
</form> 

出於某種原因,當我點擊提交按鈕,沒有任何反應。該按鈕已經死了。 我的控制器有下面的代碼:

.controller('registerCtrl', ['$scope', '$state', 'Registration', 
          function($state, $scope, Registration) { 

    $scope.user = { 
     name: '', 
     email: '', 
     company: '', 
     password: '' 
    }; 
    console.log('controller getting loaded'); 
    $scope.signup = function(user) { 
     console.log('register getting called'); 
    } 
}]); 

它充當如果窗體不承認「註冊」的方法。以類似的方式,我實現了一個登錄表單:

<form class="m-t" ng-submit="login(credentials)" novalidate> 
      <div class="form-group"> 
       <input type="email" class="form-control" placeholder="Email" required="" ng-model="credentials.email"> 
      </div> 
      <div class="form-group"> 
       <input type="password" class="form-control" placeholder="Password" required="" ng-model="credentials.password"> 
      </div> 
      <button type="submit" class="btn btn-primary block full-width m-b">Login</button> 

      <a ui-sref="forgot_password"><small>Forgot password?</small></a> 
      <p class="text-muted text-center"><small>Do not have an account?</small></p> 
      <a class="btn btn-sm btn-white btn-block" ui-sref="register">Create an account</a> 
</form> 

和:

.controller('loginCtrl', ['$scope', '$rootScope', '$state', 'Authentication', 'AUTH_EVENTS', 
         function($scope, $rootScope, $state, Authentication, AUTH_EVENTS) { 

    $scope.credentials = { 
     email: '', 
     password: '' 
    }; 

    $scope.login = function(credentials) { 
     Authentication.login(credentials).then(function(user) { 
      $rootScope.$broadcast(AUTH_EVENTS.loginSuccess); 
      $scope.setCurrentUser(user); 
      $state.go('events'); 
     }, function() { 
      $rootScope.$broadcast(AUTH_EVENTS.loginFailed); 
     }); 
    } 
}]); 

第二種形式是工作正如預期......我在茫然,到底是怎麼回事。我想說,我登錄了registerCtrl,它正在被正確加載到頁面中,但該方法在被調用時不會執行任何操作。

任何想法還有什麼可能導致此?我檢查了所有的解決方案,但沒有任何幫助。

在我的config.js,這兩條路徑都同樣宣稱:「註冊」按鈕調用同一方法

.state('login', { 
      url: "/login", 
      templateUrl: "views/login.html", 
      data: { pageTitle: 'Login', specialClass: 'gray-bg' } 
     }) 
     .state('register', { 
      url: "/register", 
      templateUrl: "views/register.html", 
      data: { pageTitle: 'Register', specialClass: 'gray-bg' } 
     }) 

我也試圖改變我的形式有NG點擊,但是這有同樣的行爲。

謝謝!

+0

您是否檢查了控制檯的錯誤?你確定正確的'$ scope'用於註冊表單嗎? – puelo

+0

沒有錯誤。我還檢查了「用戶」是否在範圍內,並且添加{{user}}作爲調試文本顯示正確的文本,因爲我填寫了表單。所以「用戶」變量同步得很好。 –

回答

2

在「registerCtrl」控制器,你有$範圍和$狀態混合:

.controller('registerCtrl', ['$scope', '$state', 'Registration', 
         function($state, $scope, Registration) {}]); 

它應該是:

.controller('registerCtrl', ['$scope', '$state', 'Registration', 
         function($scope, $state, Registration) {}]); 

我認爲這個問題是你要分配用戶對象和登錄功能錯誤的應用程序對象。

+0

哇......我其實並沒有想法在DI上重要的順序。謝天謝地,救了我很多頭痛。 –