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'
});
}