0
你好，我正在做一個簡單的登錄和註冊應用程序。我使用兩個控制器一個用於登錄，另一個用於在同一個html頁面上註冊。登錄工作不在註冊。我在哪裏做錯了。角JS多控制器不工作
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>WeBeR</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer- reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css? family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font- awesome/4.3.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/animate.css">
</head>
<body>
<div class="container">
<div class="top">
<h1 id="title" class="hidden"><span id="logo"><span><br><br><br><br> </span></span></h1>
</div>
<div class="login-box animated fadeInUp">
<div class="module form-module">
<div class="toggle">
<h3> SignUp</h3>
<i class="fa fa-times fa-pencil"></i>
<div class="tooltip">
Register
</div>
</div>
<div class="form" ng-controller="SignUpController as ctrl">
<h2>LogOn</h2>
<form name="ctrl.signupForm" ng-submit="ctrl.signup()">
<!-- *************************************USERNAME********************************************************************** -->
<div class="error" role="alert" ng-show="errorMsg"><strong>{{errorMsg}}</strong></div><br>
<div class="form-group" ng-class="{'has- error':ctrl.hasErrorClass('userName')}">
<input type="text" id="userName" name="userName" required placeholder="UserName"
ng-model="ctrl.newCustomer.userName" ng- model-options="{ updateOn : 'default blur' }"
ng-focus="ctrl.toggleUsernamePrompt(true)" ng-blur="ctrl.toggleUsernamePrompt(false)"/>
</div>
********************PASSWORD**********************************************************************
<div ng-class="{'has- error':ctrl.hasErrorClass('password')}">
<input type="password" id="password" required placeholder="Password"
type="{{ctrl.getPasswordType()}}"
ng-model-options="{ updateOn : 'default blur' }"
ng-model="ctrl.newCustomer.password"/>
</div>
<button type="submit">Sign In</button>
</form>
</div>
<!-- *************************************************REGISTRATION******************************************************** -->
<div class="form" ng-controller="RegistrationController as rctrl">
<h2>Create an account</h2>
<form name="rctrl.regForm" ng-submit="rctrl.register()">
<!-- *************************************************FIRSTNAME******************************************************** -->
<div class="form-group" ng-class="{'has-error':rctrl.hasErrorClass('firstName')}">
<input id="firstName" name="firstName" class="form-control" type="text" required placeholder="First Name"
ng-model="rctrl.newCustomer1.firstName" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="rctrl.toggleFirstNamePrompt(true)" ng-blur="rctrl.toggleFirstNamePrompt(false)" />
</div>
<!-- *************************************************LASTNAME******************************************************** -->
<div class="form-group" ng-class="{'has-error':rctrl.hasErrorClass('lastName')}">
<input id="lastName" name="lastName" class="form-control" type="text" required placeholder="Last Name"
ng-model="rctrl.newCustomer1.lastName" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="rctrl.toggleLastNamePrompt(true)" ng-blur="rctrl.toggleLastNamePrompt(false)"/>
</div>
<!-- *************************************************EMAIL******************************************************** -->
<div class="form-group" ng-class="{'has-error':rctrl.hasErrorClass('email')}">
<input id="email" name="email" class="form-control" type="email" required placeholder="E-mail"
ng-model="rctrl.newCustomer1.email" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="rctrl.toggleEmailPrompt(true)" ng-blur="rctrl.toggleEmailPrompt(false)" email-available/>
<div class="message-animation" ng-if="rctrl.regForm.$pending.emailExists">checking....</div>
<div class="message-animation" ng-if="rctrl.regForm.$error.emailExists">Email exists.</div>
</div>
<!-- *************************************************USERNAME******************************************************** -->
<div class="form-group" ng-class="{'has-error':rctrl.hasErrorClass('userName')}">
<input id="userName" name="userName" class="form-control" type="text" required placeholder="UserName"
ng-model="rctrl.newCustomer1.userName" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="rctrl.toggleUsernamePrompt(true)" ng-blur="rctrl.toggleUsernamePrompt(false)" user-available/>
<div class="message-animation" ng-if="rctrl.regForm.$pending.userExists">checking....</div>
<div class="message-animation" ng-if="rctrl.regForm.$error.userExists">UserName exists already.</div>
</div>
<!-- *************************************************PASSWORD******************************************************** -->
<div class="form-group">
<div class="input-group" ng-class="{'has-error':rctrl.hasErrorClass('password')}">
<input id="password" name="password" class="form-control" required placeholder="Password"
type="{{rctrl.getPasswordType()}}"
ng-model-options="{ updateOn : 'default blur' }"
ng-model="rctrl.newCustomer1.password"
/>
</div>
</div>
<button>Register</button>
</form>
</div>
<div class="cta">
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script src="resources/js/register.js"></script>
<script src="resources/js/animate.js"></script>
<script src="resources/js/login.js"></script>
</body>
</html>
我的JS
angular.module('MyApp', [])
.controller('SignUpController',function($scope, $http) {
var ctrl = this, newCustomer = {
userName : '',
password : ''
};
var signup = function() {
if (ctrl.signupForm.$valid) {
ctrl.showSubmittedPrompt = true;
submitForm();
clearForm();
}
};
var register = function() {
if (ctrl.signupForm.$valid) {
ctrl.showSubmittedPrompt = true;
alert("success");
}
};
var clearForm = function() {
ctrl.newCustomer = {
userName : '',
password : ''
};
ctrl.signupForm.$setUntouched();
ctrl.signupForm.$setPristine();
};
var submitForm = function(userName, password) {
$http({
method : 'POST',
url : 'http://localhost:8081/Classmate/user/getvalid',
data : {
'userName' : $scope.ctrl.newCustomer.userName,
'password' : $scope.ctrl.newCustomer.password
},
headers : {
'Content-Type' : 'application/json'
}
}).success(function(data, status, headers, config) {
console.log(data);
if (data == false) {
var path = "/Classmate/view.jsp";
window.location.href = path;
} else {
$scope.errorMsg = "Invalid Credentials";
}
}).error(function(data, status, headers, config) {
$scope.errorMsg = 'Unable to submit.Please try after sometime.';
})
};
var getPasswordType = function() {
return ctrl.signupForm.showPassword ? 'text' : 'password';
};
var toggleUsernamePrompt = function(value) {
ctrl.showUsernamePrompt = value;
};
var hasErrorClass = function(field) {
return ctrl.signupForm[field].$touched
&& ctrl.signupForm[field].$invalid;
};
var showMessages = function(field) {
return ctrl.signupForm[field].$touched
|| ctrl.signupForm.$submitted
};
ctrl.showUsernamePrompt = false;
ctrl.showSubmittedPrompt = false;
ctrl.toggleUsernamePrompt = toggleUsernamePrompt;
ctrl.getPasswordType = getPasswordType;
ctrl.hasErrorClass = hasErrorClass;
ctrl.showMessages = showMessages;
ctrl.newCustomer = newCustomer;
ctrl.signup = signup;
ctrl.clearForm = clearForm;
})
/*********************************************REG CONTROLLER*******************************************************/
.controller('RegisterController', function($scope, $http) {
var rctrl = this, newCustomer1 = {
firstName : '',
lastName : '',
email : '',
zipName : '',
userName : '',
password : ''
};
var register = function() {
if (rctrl.regForm.$valid) {
rctrl.showSubmittedPrompt = true;
submitRegForm();
clearForm();
}
};
var clearForm = function() {
rctrl.newCustomer1 = {
firstName : '',
lastName : '',
email : '',
userName : '',
password : ''
};
rctrl.regForm.$setUntouched();
rctrl.regForm.$setPristine();
};
var submitRegForm = function() {
var formData = {
'firstName' : $scope.rctrl.newCustomer1.firstName,
'lastName' : $scope.rctrl.newCustomer1.lastName,
'email' : $scope.rctrl.newCustomer1.email,
'userName' : $scope.rctrl.newCustomer1.userName,
'password' : $scope.rctrl.newCustomer1.password
}
var response = $http.post(
'http://localhost:8081/Classmate/user/save', formData);
response.success(function(data, status, headers, config) {
/*
* alert("Congrats,"+JSON.stringify(data.firstName)+"
* Welcome aboard.");
*/
var path = "/Classmate/sample.jsp";
window.location.href = path;
});
response.error(function(data, status, headers, config) {
alert("Error Details1: " + JSON.stringify({
data : data
}));
});
};
var getPasswordType = function() {
return rctrl.regForm.showPassword ? 'text' : 'password';
};
var toggleEmailPrompt = function(value) {
rctrl.showEmailPrompt = value;
};
var toggleUsernamePrompt = function(value) {
rctrl.showUsernamePrompt = value;
};
var toggleFirstNamePrompt = function(value) {
rctrl.showFirstNamePrompt = value;
};
var toggleLastNamePrompt = function(value) {
rctrl.showLastNamePrompt = value;
};
var hasErrorClass = function(field) {
return rctrl.regForm[field].$touched
&& rctrl.regForm[field].$invalid;
};
var showMessages = function(field) {
return rctrl.regForm[field].$touched
|| rctrl.regForm.$submitted
};
rctrl.showLastNamePrompt = false;
rctrl.showFirstNamePrompt = false;
rctrl.showEmailPrompt = false;
rctrl.showUsernamePrompt = false;
rctrl.showSubmittedPrompt = false;
rctrl.toggleEmailPrompt = toggleEmailPrompt;
rctrl.toggleUsernamePrompt = toggleUsernamePrompt;
rctrl.toggleFirstNamePrompt = toggleFirstNamePrompt;
rctrl.toggleLastNamePrompt = toggleLastNamePrompt;
rctrl.getPasswordType = getPasswordType;
rctrl.hasErrorClass = hasErrorClass;
rctrl.showMessages = showMessages;
rctrl.newCustomer1 = newCustomer1;
rctrl.register = register;
rctrl.clearForm = clearForm;
})
.directive(
'emailAvailable',
function($timeout, $q, $http) {
return {
restrict : 'AE',
require : 'ngModel',
link : function(scope, elm, attr, model) {
model.$asyncValidators.emailExists = function(email) {
return $http.get(
'http://localhost:8081/Weber/user/getemail? email='
+ email).then(function(res) {
+$timeout(function() {
model.$setValidity('emailExists', res.data);
console.log(res.data);
}, 1000);
});
};
}
}
})
.directive(
'userAvailable',
function($timeout, $q, $http) {
return {
restrict : 'AE',
require : 'ngModel',
link : function(scope, elm, attr, model) {
model.$asyncValidators.userExists = function(userName) {
return $http.get(
'http://localhost:8081/Weber/user/checkuser?user='
+ userName).then(function(res) {
+$timeout(function() {
model.$setValidity('userExists', res.data);
console.log(res.data);
}, 1000);
});
};
}
}
});
當我嘗試點擊註冊它沒有擊中控制器
謝謝 馬克
在你的JS中，你有一個名爲'RegisterController'的註冊控制器，在你的HTML中，你有'RegistrationController'。 – ZachPerkitny