0

Estou desenvolvendo um projeto e estou utilizando Angular, necessito que ao acessar a página interna, o menu fique selecionado, até ai beleza, porém ó problema é quando a página interna contém slug ou alguma interna da interna, segue código que estou utilizando:

Html:

 <li class="waves-effect waves-light" ng-class="(url_atual == '/module9'? fundo_selecionado:fundo_normal)">
                        <img src="app/template/img/col.png">
                        <p>Colaboradores</p>
                    </li>

Controller:

        $scope.url_atual = $location.url();
        $scope.fundo_selecionado = 'fundo_selecionado';
        $scope.fundo_normal = 'fundo_normal';

CSS:

.fundo_selecionado{
  background-color: #fff!important;
}
.fundo_normal{
  background-color: $cor_cinza!important;
}

Como podem perceber, utilizo um ng-class e se a url atual for igual o módulo acessado, ele joga a classe fundo_selecionado, senão ele joga a classe fundo_normal. O problema é quando tenho internas do módulo, como por exemplo /module9/interna ou module9/slug que ai ele não mantém o menu selecionado. Alguém tem uma dica de como posso manter o menu selecionado mesmo nas internas dos módulos?

Segue sistema de rotas:

   function Config($routeProvider) {
    $routeProvider
    .when('/module9', {
        templateUrl: 'module9/template/index.html',
        controller: 'module9Controller',
        controllerAs: 'vm'
    })
    .when('/module9/:module9Slug', {
        templateUrl: 'module9/template/interna.html',
        controller: 'module9Controller',
        controllerAs: 'vm'
    })
    .when('/module9/adicionar/add', {
        templateUrl: 'module9/template/adicionar.html',
        controller: 'module9Controller',
        controllerAs: 'vm'
    });
}
2
  • É isso aqui? ng-class="(url_atual == '/module9' || url_atual == '/module9/interna ou module9/slug' ? fundo_selecionado:fundo_normal)" Commented 29/04/2016 às 19:06
  • Qual sistema de rotas, ou como a navegação em seu projeto é feita? Commented 29/04/2016 às 23:00

2 Respostas 2

0

Testa fazer isso.

<li class="waves-effect waves-light" ng-class="(url_atual == '/module9' || url_atual == '/module9/interna ou module9/slug' ? fundo_selecionado:fundo_normal)">
    <img src="app/template/img/col.png">
    <p>Colaboradores</p>
</li>
1
  • Assim não funciona porque na página interna ou na página que contém slug, eu não vou saber qual é a slug ou qual é o segmento da url da página interna, por exemplo na slug seria /modulo9/15-noticia-interna-lorem-ipsum e não modulo9/slug Commented 5/05/2016 às 17:51
0

A solução momentânea foi identificar cada menu com uma classe e fazer um case verificando o menu e executar a função quando a rota for alterada, segue código:

vm.MenuInternas = function(){
            $timeout(function() {
                switch($location.path()) {
                    case '/':
                        $('.menu a').removeClass('active-Menu');
                    break;
                    case '/quemsomos':
                        $('.menu a').removeClass('active-Menu');
                        $('.quemsomos_').addClass('active-Menu');
                    break;
                    case '/solucoes':
                        $('.menu a').removeClass('active-Menu');
                        $('.solucoes_').addClass('active-Menu');
                    break;
                    default: 
                    break;
                }
            });
        }
        vm.MenuInternas();

Executando função na troca de rota:

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
    vm.MenuInternas();
})

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .