I made a website and deployed it to heroku at https://hydroponics.herokuapp.com/#/ . Problem is when you refresh the page, it will appear a purple button Hello! . It is the button that I want to show after logged in. The code like this:
index.ejs
<body>
<!--header start here-->
<div class="header">
<div class="row">
<!-- before login -->
<!-- login modal -->
<div ng-hide="userLogin" class="header-login">
<a href="#" id="loginButton"><span>Login</span></a>
<div id="loginBox">
<form id="loginForm" ng-controller="LoginCtrl">
<!-- form body -->
</form>
</div>
</div>
<!-- end login modal -->
<!-- register modal -->
<div ng-hide="userLogin" class="header-login">
<a href="#" id="registerButton"><span>Register</span></a>
<div id="registerBox">
<form id="registerForm" ng-controller="RegisterCtrl">
<!-- form body -->
</form>
</div>
</div>
<!-- end register modal-->
<!-- end before login -->
<!-- after login -->
<div ng-show="userLogin" class="header-login">
<button type="button" name="button"><span>Hello! </span></button>
<div id="loggedInBox">
<form id="loggedInForm" ng-controller="LoginCtrl">
</form>
</div>
</div>
<!-- end after login -->
</div>
</div>
<!--header end here-->
<!--body start here-->
<div ng-view></div>
<!--body end here-->
<!--footer start here-->
<!--//footer-->
router:
router.get("/", function(req, res){
res.render("index");
});
controller.js
var controller = angular.module('myApp.controllers', []);
controller.controller('LoginCtrl', function($scope, $rootScope, $localStorage, $window, UserService, AuthService) {
$scope.user = {
email: '',
password: ''
};
$scope.login = function() {
var isEmpty = AuthService.checkEmptyLogin($scope.user);
if (!isEmpty.isErr) {
UserService.login($scope.user).then(function(result) {
if (result.data.success) {
$rootScope.userLogin = result.data.data.name;
// save data to localStorage
$localStorage.token = result.data.token;
$localStorage.name = result.data.data.name;
$localStorage.email = result.data.data.email;
$localStorage.phone = result.data.data.phone;
//------------------
window.alert('Login success!');
} else {
$scope.loginMessage = result.data.error;
}
});
} else {
$scope.loginMessage = isEmpty.message;
}
}
$scope.logout = function() {
UserService.logout();
var url = "http://" + $window.location.host + "/";
$window.location.href = url;
}
$rootScope.userLogin = $localStorage.name;
});
The same problem when you register an account and login. If you refresh the page, button Register and Login will appear for a while. I tried to change to ng-if but nothing change. Anyone has the same problem ? How can I fix it ?
via Thach Huynh
No comments:
Post a Comment