Em primeiro lugar, esse problema pode ser resolvido de várias maneiras. Dessa forma, pode não ser o mais elegante, mas certamente funciona.
Aqui está uma solução simples que você deve poder adicionar a qualquer projeto. Você pode simplesmente adicionar uma "pageKey" ou alguma outra propriedade ao configurar sua rota que pode ser usada para desativar. Além disso, você pode implementar um ouvinte no método $ routeChangeSuccess do objeto $ route para ouvir a conclusão bem-sucedida de uma alteração de rota.
Quando o manipulador é acionado, você obtém a chave da página e usa essa chave para localizar elementos que precisam ser "ATIVOS" para esta página e aplica a classe ACTIVE.
Lembre-se de que você precisa de uma maneira de tornar TODOS os elementos "ATIVOS". Como você pode ver, estou usando a classe .pageKey nos meus itens de navegação para desativá-los, e estou usando o .pageKey_ {PAGEKEY} para ativá-los individualmente. Mudar todos eles para inativos seria considerado uma abordagem ingênua; potencialmente, você obteria melhor desempenho usando a rota anterior para desativar apenas os itens ativos ou alterar o seletor de jquery para selecionar apenas os itens ativos a serem desativados. Usar o jquery para selecionar todos os itens ativos é provavelmente a melhor solução, pois garante que tudo esteja limpo para a rota atual no caso de qualquer erro de CSS que possa estar presente na rota anterior.
O que significaria alterar essa linha de código:
$(".pagekey").toggleClass("active", false);
para este
$(".active").toggleClass("active", false);
Aqui está um exemplo de código:
Dada uma barra de navegação de auto-inicialização de
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li>
<li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
<li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
<li><a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li>
</ul>
</div>
</div>
E um módulo angular e um controlador como o seguinte:
<script type="text/javascript">
function Ctrl($scope, $http, $routeParams, $location, $route) {
}
angular.module('BookingFormBuilder', []).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
template: 'I\'m on the home page',
controller: Ctrl,
pageKey: 'HOME' }).
when('/page1/create', {
template: 'I\'m on page 1 create',
controller: Ctrl,
pageKey: 'CREATE' }).
when('/page1/edit/:id', {
template: 'I\'m on page 1 edit {id}',
controller: Ctrl, pageKey: 'EDIT' }).
when('/page1/published/:id', {
template: 'I\'m on page 1 publish {id}',
controller: Ctrl, pageKey: 'PUBLISH' }).
otherwise({ redirectTo: '/' });
$locationProvider.hashPrefix("!");
}).run(function ($rootScope, $http, $route) {
$rootScope.$on("$routeChangeSuccess",
function (angularEvent,
currentRoute,
previousRoute) {
var pageKey = currentRoute.pageKey;
$(".pagekey").toggleClass("active", false);
$(".pagekey_" + pageKey).toggleClass("active", true);
});
});
</script>