泽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');
}
);
}
}]);
由于某种原因,我的提交函数没有被调用。这是为什么?我究竟做错了什么?为什么上帝恨我!?!??!控制器堆叠有什么干扰我希望代码工作的方式吗?
答案 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">