CODEWITHSUNDEEP
javascriptangularjs
Jonathan Szekely
Jonathan Szekely

Reputation: 207

Why doesn't my angular controller function get called?

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?

Upvotes: 1

Views: 304

Answers (1)

CodingIntrigue
CodingIntrigue

Reputation: 78605

<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

Upvotes: 3

Related Questions