AngularJS ngSubmit not calling controller function

Question

I have a form that I'm trying to use ng-submit with, but its not calling the controller function submit()

index.html

...
<body ng-app="app">

    <div ng-view></div>
    <!-- In production use:
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
    -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/app.js"></script>
</body>

The form:

<div class="container">
    <form class="form-signin" name="login" id="loginForm" ng-submit="submit()">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="text" class="input-block-level" placeholder="Email Address" name="email" ng-model="formData.email">
        <input type="password" class="input-block-level" placeholder="Password"  name="password" ng-model="formData.password">
        <label class="checkbox">
            <input type="checkbox" value="remember-me"> Remember Me
        </label>
        <input class="btn btn-large btn-primary" type="submit">
    </form>
</div>

And my app.js:

'use strict';
var app = angular.module('app',['ngRoute', 'app.controllers']);

app.config(function($routeProvider) {
    $routeProvider.when('/', {
            templateUrl : 'partials/login.html',
            controller: 'loginController'});
});

And my controller.js:

'use strict';

/* Controllers */

angular.module('app.controllers', [])

.controller('loginController', ['$http', function($scope, $http) {
    $scope.formData = {};
    console.log('Controller Loaded');
    $scope.submit = function() {
        console.log('Click');
        $http({
            method: 'POST',
            url: 'http://localhost:8080/RoommateAPI/authentication/login',
            data: $scope.formData,
            headers: {'Content-Type': 'application/json'}
        }).success(function(data, status, headers, config) {
            console.log(data);
        }).error(function() {
            console.log("ERROR")
        });
    }
}]);

When I hit submit it's not erroring out or doing anything really... Feel like I'm missing something obvious but I've looked at this and everything appears to be the same.

What I've tried:

Consolidating the controller into the app.js
Removed double declaration of the controller form the markup

@vadim I had a console.log() in there and I wasn't seeing it appear. However a console.log() in the controller function DID log. — mmcclannahan, Aug 25 '14 at 19:19
You are double declaring `loginController` once in your route definition and once in markup, I'd remove it from your markup as the route definition will set that up for you. And since you have separate files, make sure you're including controllers.js before app.js — Brocco, Aug 25 '14 at 19:22
@vadim For what it's worth, if I console.log() under the function($scope, $http) { line, it logs twice. — mmcclannahan, Aug 25 '14 at 19:22
@Brocco While it removed the double console.log I mentioned to vadim it doesn't seem to have made a difference. I've updated my question to reflect your suggested changes. — mmcclannahan, Aug 25 '14 at 19:36
@mam8cc Inside your controller initialize `formData` like this: `$scope.formData = {};` you are trying to set child properties on an object that does not exist. — Brocco, Aug 25 '14 at 19:39
@Brocco Looking at Batarang, it actually will allow you to set the properties using ng-model like that without instantiation, but I've added your suggestion regardless, to no avail. — mmcclannahan, Aug 25 '14 at 19:43

score 3 · Accepted Answer · answered Aug 25 '14 at 19:43

3

Your arguments are wrong in the constructor function of your controller. You have:

app.controller('loginController', ['$http', function($scope, $http) {

Change this to be:

app.controller('loginController', ['$scope', '$http', function($scope, $http) {

answered Aug 25 '14 at 19:43

sma

9,449
8
51
80

This fixed it. For some reason I thought the scope injection was implied? Must have misread something somewhere. – mmcclannahan Aug 25 '14 at 19:45
Yeah, you have to explicitly inject it. All it takes sometimes is a second set of eyes. Glad to help. – sma Aug 25 '14 at 19:46

score 0 · Answer 2 · answered Aug 25 '14 at 19:19

0

Try to put your form tag inside a div, and then declare the controller on this div instead of the form.

answered Aug 25 '14 at 19:19

Pear

470
3
17

AngularJS ngSubmit not calling controller function

2 Answers2