using 'this' instead of $scope failed in angularjs

Question

I used megaboiletplate.com for scalfoding my project. I downloaded a starter pack but I'm facing some issue. I've put the starter code to a repo

in this file, line 16 is not triggered when I click the login button. The login button has the view like this

<form ng-submit="login()">
        <legend>Log In</legend>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" name="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" autofocus>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" name="password" id="password" placeholder="Password" class="form-control" ng-model="user.password">
        </div>
        <div class="form-group"><a href="/forgot"><strong>Forgot your password?</strong></a></div>
        <button type="submit" class="btn btn-success">Log in</button>
      </form>

What's wrong??

Possible duplicate of ng-submit not triggering in angularjs. Please don't ask the same question multiple times. — Claies
– Claies, Commented Sep 4, 2016 at 6:28

Niles Tanner · Accepted Answer · 2016-09-04 06:17:36Z

0

make sure that your code is using the 'controller as' syntax. You can use this in the controller but you must redefine the controller in the HTML. like:

<body ng-controller="mycontroller as ctrl">

then you can use the controller functions like

<form ng-submit="ctrl.login()">

https://docs.angularjs.org/api/ng/directive/ngController

you may have to edit your routing if your controller is assigned there.

.when('/login', {
        templateUrl: 'partials/login.html',
        controller: 'LoginCtrl',
        resolve: { skipIfAuthenticated: skipIfAuthenticated }
      })

would be changed to:

.when('/login', {
        templateUrl: 'partials/login.html',
        controller: 'LoginCtrl',
        controllerAs: 'ctrl',
        resolve: { skipIfAuthenticated: skipIfAuthenticated }
      })

in your case this should be found in the app.js of the boilerplate

edited Sep 4, 2016 at 6:17

answered Sep 4, 2016 at 5:56

Niles Tanner

4,0512 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Maria Jane Over a year ago

I know but the boilerplate doesn't even have ng-controller in the view after they use gulp. Delve deeper thanks

Maria Jane Over a year ago

I have to change in both places?

Niles Tanner Over a year ago

Just one of them. Either in the html or in your router

Maria Jane Over a year ago

then I should do ng-model="ctrl.property_name" right?

Niles Tanner Over a year ago

correct with controller as syntax you define the variable you will use in the HTML in this case it's 'ctrl'. If you would like more examples you can look at the link I posted in my answer

Collectives™ on Stack Overflow

using 'this' instead of $scope failed in angularjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related