AngularJS控制器提交表单

时间:2017-05-23 10:17:06

标签: angularjs firebase firebase-authentication angularfire

我遇到控制器问题

 .factory('Auth', function($firebaseAuth){
  var auth = $firebaseAuth();
  return auth;
 })

.controller('authCtrl', function() {
  var authCtrl = this;

  authCtrl.user = {
    email: '',
    password: ''
  };

  console.log('hoi1');

  authCtrl.login = function (){
    console.log('hoi2');
  };
});

-

<div id="loginModal" class="modal" ng-controller="authCtrl">
<div class="modal-background"></div>
<div class="modal-content">
  <div class="modal-body">
    <form ng-submit="authCtrl.login()">
      <h1>Login</h1>
      <p id="loginError">&nbsp;</p>
      <input type="email" name="loginEmail" value="" placeholder="email" class="input" ng-model="authCtrl.user.email">
      <br>
      <input type="password" name="loginPassword" value="" placeholder="******" class="input" ng-model="password" ng-model="authCtrl.user.password">
      <br>
      <input type="submit" value="Login">
    </form>
  </div>
</div>

控制器总是在我体内,但我在控制台中看到hoi1,但是当我提交表单时,我没有得到hoi2

怎么了?

此致 JUR

3 个答案:

答案 0 :(得分:2)

在控制器中使用$ scope

.controller('authCtrl', function( $scope) {
   $scope.user = {
      email: '',
      password: ''
   };

   console.log('hoi1');

   $scope.login = function (){
    console.log('hoi2');
   };
});

答案 1 :(得分:2)

更改

<div id="loginModal" class="modal" ng-controller="authCtrl"> 

<div id="loginModal" class="modal" 
ng-controller="authCtrl as authCtrl">

如果您想使用controller this ,则必须将ng-controller添加为ng-controller="authCtrl as authCtrl"

有关Controller as

的更多信息,请查看此tutorial

Working Fiddle Example

答案 2 :(得分:1)

这是因为当$ scope在控制器中执行时,它会执行console.log('hoi1'),因为它不会等待任何事件发生。你只需写“调试器”;在您的代码中,需要检查其执行部分