ng-show/ng-Hide does not update index-html, only the view

Asked

Viewed 427 times

1

I am mounting an application that has an index.html and views in separate files being rendered within ng-view index.

In this index I have a footer that I would like to disappear when the user is forwarded to the home view, after logging in.

The problem is that the ng-Hide of this footer is not taking the current value of the "authenticated" variable after logging in, which causes the user to be routed to the home, but with the footer still appearing.

How do I update the variable and the footer disappears? For variables that are used within the view, ng-Hide/ng-show works correctly, it’s just not working for this static part of the index.

index hmtl.

<html ng-app="gameApp">

<head>
	<!-- referências de css e scripts  -->
</head>

<body>

  <div id="main" class="container">
   	<div ng-view></div>
  </div>
  
  <footer ng-hide="autenticado">
    teste
  </footer>
  
</body>
</html>

app js.

var ggApp = angular.module('gameApp', ['ngRoute', 'servicoLogin']);

	// configure our routes
	ggApp.config(function($routeProvider) {
		$routeProvider

			// route for the home page
			.when('/', {
				templateUrl : 'pages/login.html',
				controller  : 'usuarioController',
				controllerAs  : 'loginCtrl'
			})
			// route for the about page
			.when('/cadastro', {
				templateUrl : 'pages/cadastroUsuario.html',
				controller  : 'usuarioController',
				controllerAs  : 'loginCtrl'
			})

			// route for the contact page
			.when('/home', {
				templateUrl : 'pages/home.html',
				controller  : 'homeController',
				controllerAs  : 'homeCtrl'
			})
			.otherwise({
		        redirectTo: '/'
			});
	});

usuarioController.js

ggApp.controller("usuarioController", ['$scope', 'Login', 'Cadastro', 'VerificaEmail', '$location', 
                                       function($scope, Login, Cadastro, VerificaEmail, $location) {
		
	$scope.erro = false;
	$scope.mostraMensagem = false;
	$scope.mensagemErro = "teste";
	$scope.autenticado = false;
	
	this.usuarioLogin = {};
	
	this.realizaLogin = function() {
		
		var usuario = {
				email: this.usuarioLogin.login,
				senha: this.usuarioLogin.senha
		}
		
		var promise = Login.login(usuario);
		
		promise.$promise.then( 
				function success(usuario)
				{
					if (usuario.id > 0) {
						$location.path("home");
						$scope.autenticado = true;
					} else {
						$scope.erro = true;
						$scope.mensagemErro = "Usuário não encontrado!";
					};
					$scope.mostraMensagem = true;
					$scope.setClasseErro();
					
				},
				function error(value) {
					$scope.erro = true;
					$scope.mostraMensagem = true;
					$scope.mensagemErro = "Erro: " + value.status;
				}
		);
		
		
	};
}]);

angularjs

  • You can check parameters when you change route by checking whether or not to display the footer. Or put the authenticated variable in rootScope

1 answer

1


  • worked perfectly! Thanks again!

  • Just one more thing: in this case, when I press F5 to refresh the page the scope restarts and the variable becomes original or Undefined. Is there a way to make this a session variable? Is there such a concept in Angular?

  • This concept does not exist due to the way Javascript works. Each page refresh is a completely new instance of a "program". But you can implement something similar using cookies. See the documentation at: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie I would just like to point out that the control of whether a user is logged in or not in the application should not be done on the client side, but on the server side.

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.