0
こんにちはすべて私は簡単なログインと登録アプリをやっています。私は2つのコントローラを1つのログイン用に、もう1つは同じhtmlページ上にサインアップしています。ログインは登録ではなく動作しています。私は間違っています。私は登録をクリックしようとするとAngular 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);
});
};
}
}
});
それは、コントローラ
に当たらないあなたは、あなたのコントローラがmisnamed持っているあなたに マーク
あなたのJSには、あなたのHTMLと同様に 'RegisterController'という名前の登録コントローラがあります。 – ZachPerkitny