Innanzitutto, questo problema può essere risolto in molti modi. In questo modo potrebbe non essere il più elegante, ma funziona con certezza.
Ecco una soluzione semplice che dovresti essere in grado di aggiungere a qualsiasi progetto. Puoi semplicemente aggiungere un "pageKey" o qualche altra proprietà quando configuri il percorso che puoi usare per chiudere. Inoltre, è possibile implementare un listener sul metodo $ routeChangeSuccess dell'oggetto $ route per attendere il completamento corretto di una modifica della rotta.
Quando il gestore viene attivato, si ottiene la chiave di pagina e si utilizza quella chiave per individuare gli elementi che devono essere "ATTIVI" per questa pagina e si applica la classe ATTIVO.
Tieni presente che hai bisogno di un modo per rendere TUTTI gli elementi "ATTIVI". Come puoi vedere sto usando la classe .pageKey sui miei oggetti di navigazione per spegnerli tutti e sto usando .pageKey_ {PAGEKEY} per attivarli singolarmente. Commutandoli tutti in inattivi, sarebbe considerato un approccio ingenuo, potenzialmente si otterrebbero prestazioni migliori utilizzando il percorso precedente per rendere inattivi solo gli elementi attivi, oppure è possibile modificare il selettore jquery per selezionare solo gli elementi attivi da rendere inattivi. L'uso di jquery per selezionare tutti gli elementi attivi è probabilmente la soluzione migliore perché assicura che tutto venga ripulito per il percorso corrente in caso di eventuali bug CSS che potrebbero essere stati presenti sul percorso precedente.
Il che significherebbe cambiare questa riga di codice:
$(".pagekey").toggleClass("active", false);
a questo
$(".active").toggleClass("active", false);
Ecco un po 'di codice di esempio:
Data una barra di avvio di
<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 un modulo angolare e un controller come il seguente:
<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>