Ẩn nút Login, Register và hiện nút Hello sau khi đăng nhập

Thach Huynh

mình có làm một trang web nhỏ và deploy lên heroku, link: http://hydroponics.herokuapp.com/#/
vấn đề là khi mình refresh trang thì nút "Hello! {{userLogin}}" màu tím lại hiện ra dưới chỗ nút Login và Register. Nút hello này mình định sau khi người dùng đăng nhập thì sẽ hiện nó ra, hide hai nút kia đi, nhưng không hiểu sao mỗi khi refresh trang thì nó cứ hiện ra 1 tí rồi mất, kiểu như nó bị delay. Mình dùng nodejs với ejs. Code cụ thể như sau:
file index.ejs:

       <!-- 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! {{userLogin}}</span></button>
      <div id="loggedInBox">
        <form id="loggedInForm" ng-controller="LoginCtrl">

        </form>
      </div>
    </div>
    <!-- end after login -->

  </div>

file router:
router.get("/", function(req, res){
res.render("index");
});

file controller.js:

var controller = angular.module('myApp.controllers', []);

controller.controller('LoginCtrl', function($scope, $rootScope, $localStorage, AuthService) {

$scope.login = function() {

  UserService.login($scope.user).then(function(result) {
    if (result.data.success) {
      $rootScope.userLogin = result.data.data.name;
     
      $localStorage.name = result.data.data.name;

      window.alert('Login success!');
    } else {
      $scope.loginMessage = result.data.error;
    }
  });

}
$rootScope.userLogin = $localStorage.name;
});

hidemanvn

Dùng ng-bind Hello! {{userLogin}} => Hello!  hoặc dùng ng-cloak thì Hello! {{userLogin}}. Sẽ ẩn được value expression.

Nhưng với những element cần show/hide khi có condition thế này thì bạn nên dùng ng-show