AngularJS $local não está atualizado corretamente quando usando $routeProvider
-
20-12-2019 - |
Pergunta
Eu tenho uma Angular JS aplicação com um defaultController
que controla o cabeçalho do aplicativo.Então eu tenho alguns outros controladores, um para cada modo de exibição.Os pontos de vista são carregados no <main>
.Eu carga views usando o $routeProvider
com este código:
myapp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'templates/login.html',
controller: 'loginController'
}).
when('/dashboard', {
templateUrl: 'templates/dashboard.html',
controller: 'dashboardController'
}).
...
Estou tentando exibir um botão de LOGOUT dentro do cabeçalho quando carregado vista é o painel de controlo e esconde-se carregado de vista é a vista de início de sessão.A fim de fazer o que eu tenho no defaultController
o $location
objeto e adequadamente adicionar e remover classes de botão de saída com ng-class
.
Só há um problema:$localização dá-me o caminho correto a primeira vez que carregar a página, mas depois de eu alterar o modo de exibição (alterado pela $routeProvider
) essa variável não é atualizado mais, então, quando eu estou realmente em /#/dashboard
o $location.url
ainda está em /login
.Aqui o controlador de código:
controllers.controller('defaultController', ['$scope', 'ipCookie', '$location', function($scope, ipCookie, $location) {
$scope.url = $location.url();
...
Eu também tentei com $window.location.hash
com o mesmo resultado.
Alguma idéia?
EDITAR:após o aceite responder a isso é o que eu ve adicionado em defaultController
para fazê-lo funcionar
$scope.$on("$locationChangeSuccess", function() {
$scope.url = $location.url();
});
Solução
O local é, provavelmente, atualizado no serviço, após o default do controlador é carregado.
Você pode injetar a $location
serviço para o escopo e a tomar decisões em seu modelo com base nele (em seguida, ele vai automaticamente ser visto e re-avaliadas) ou você pode ouvir a $locationChangeSuccess
do evento.
Ao injetar, você pode simplesmente $scope.location = $location
e, em seguida, usar algo como <a ng-hide="location.path() != '/something'">
.
$location
transmite a $locationChangeSuccess
na raiz de escopo, então você deve ser capaz de ouvi-la em qualquer âmbito que você tem disponível: $scope.$on( "$locationChangeSuccess", function() { /* do something */ } );