AngularJS Controller submit form

Question

I have a problem with a controller

 .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>

The controller is always in my body, but I see hoi1 in the console, but when I submit the form, I don't get hoi2

What's wrong?

Sincerely, Jur

Try `ng-controller="authCtrl as authCtrl"`. @HARI's answer works but isn't best practice. — camden_kid, May 23 '17 at 10:34

HARI · Answer 1 · 2017-05-23T10:29:52.287

2

Use $scope in your controller

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

   console.log('hoi1');

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

edited May 23 '17 at 10:29

answered May 23 '17 at 10:24

HARI

406
3
8

`$scope.login = function(){console.log('hoi');}` `
` works, but why itsn't with `authCtrl`
– Jur Dekker May 23 '17 at 10:28
you can look the following link which is briefly explained why https://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers – HARI May 23 '17 at 10:31

score 2 · Accepted Answer · answered May 23 '17 at 10:43

2

Change

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

to

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

If you want to use controller this then you have to add ng-controller as ng-controller="authCtrl as authCtrl"

Check this tutorial for more info on Controller as

Working Fiddle Example

answered May 23 '17 at 10:43

S B

1,363
12
21

Thanks, this one works with my options. Have a nice day. – Jur Dekker May 23 '17 at 12:00

score 1 · Answer 3 · answered May 23 '17 at 10:33

1

It is because when your $scope execute in controller to view, it execute console.log('hoi1') as it do not wait for any event to happen. You just write "debugger;" in your code and need to check its execution part

answered May 23 '17 at 10:33

Anand Deep Singh

2,560
3
22
28

AngularJS Controller submit form

3 Answers3