AngularJS表单提交

我有一个形式，从用户那里收集注册信息，这样定义：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点击，但是这有同样的行为。

谢谢！

来源

2015-11-17 Roland Batovski

您是否检查了控制台的错误？你确定正确的'$ scope'用于注册表单吗？ – puelo

没有错误。我还检查了“用户”是否在范围内，并且添加{{user}}作为调试文本显示正确的文本，因为我填写了表单。所以“用户”变量同步得很好。 –

在“registerCtrl”控制器，你有$范围和$状态混合：

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

它应该是：

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

我认为这个问题是你要分配用户对象和登录功能错误的应用程序对象。

来源

2015-11-17 15:41:42

哇......我其实并没有想法在DI上重要的顺序。谢天谢地，救了我很多头痛。 –

AngularJS表单提交

回答

相关问题