为什么我的角度控制器功能不被调用?

时间:2015-09-23 11:23:10

标签: javascript angularjs

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

和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');
            }
        );
    }
}]);

由于某种原因,我的提交函数没有被调用。这是为什么?我究竟做错了什么?为什么上帝恨我!?!??!控制器堆叠有什么干扰我希望代码工作的方式吗?

1 个答案:

答案 0 :(得分:3)

<form name=login>这实际上是从表单元素创建一个全局变量name,因此它与您给控制器的名称冲突。从表单中删除名称:

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

或者将控制器重命名为变量:

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

Example Fiddle