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