Why doesn't my angular controller function get called?

Question

Ze HTML:

<body ng-app="ReporterApplication" ng-controller="BootstrapController as bootstrap">
        <div><% boostrap.user %></div>
        <div id="pagePreloader"></div>

        <div ng-if="!bootstrap.user.logged" ng-controller="LoginController as login" class='site-wrapper-login'>

            <form role="form" name="login" class="form-login">

                <div class="logo-wrapper">
                    <img class="logo" src="/resources/images/logo.png">
                    <div class="logo-text">
                        <div class="reporter">Reporter</div>

                        <div class="application">Internal Application</div>
                    </div>

                </div>

                <div class="icon-input large">
                    <i class="icon  fa fa-user"></i>
                    <input ng-model="login.username" type="text" name="reg_username" class="input-text" id="username" placeholder="Enter Username">
                </div>

                <div class="icon-input large">
                    <i class="icon fa fa-lock"></i>
                    <input ng-model="login.password" type="password" name="reg_password" class="input-text" id="password" placeholder="Enter Password">
                </div>

                <button class="button full large" ng-click="login.submit()">Login</button>

            </form>

        </div>

and ze rezpective JS:

Application.controller('LoginController', ['$scope', 'ServerActions', function($scope, ServerActions)
{
    console.log('WE LOGIN!');
    var login = this;

    login.username = "";
    login.password = "";

    login.submit = function () {
        console.log('SUBMIT');
        ServerActions.fetchData('login.action', {username: login.username, password: login.password}).then(
            function (response) {
                console.log('SUBMIT SUCCESS');
            }
        );
    }
}]);

For some reason my submit function doesn't get called. Why is that? What am i doing wrong? Why does god hate me!?!??! Is there something about controllers stacking that interferes with the way i expect the code to work?

You should define properties and methods on $scope like: $scope.submit = function(){... — Serhii Kozachenko
– Serhii Kozachenko, Commented Sep 23, 2015 at 11:24
@Grievoushead Using $scope would indeed make the submit function trigger, but doesn't address the issue at hand — CodingIntrigue
– CodingIntrigue, Commented Sep 23, 2015 at 11:35

CodingIntrigue · Accepted Answer · 2015-09-23 11:33:37Z

3

<form name=login> this is actually creating a global variable name from your form element, therefore it is conflicting with the name you've given to your controller. Either remove the name from the form:

<div ng-controller="LoginController as login" class='site-wrapper-login'>
    <form role="form" class="form-login">
    </form>
</div>

Or else rename your controller as variable:

<div ng-controller="LoginController as loginCtrl">

Example Fiddle

answered Sep 23, 2015 at 11:33

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

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

1 Comment

Jonathan Szekely Over a year ago

yes indeed. many thanks for such a good response my good sir!

Collectives™ on Stack Overflow

Why doesn't my angular controller function get called?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related