In erster Linie kann dieses Problem auf viele Arten gelöst werden. Dieser Weg ist vielleicht nicht der eleganteste, aber er funktioniert auf jeden Fall.
Hier ist eine einfache Lösung, die Sie jedem Projekt hinzufügen können sollten. Sie können einfach einen "pageKey" oder eine andere Eigenschaft hinzufügen, wenn Sie Ihre Route konfigurieren, die Sie zum Abmelden verwenden können. Darüber hinaus können Sie einen Listener für die $ routeChangeSuccess-Methode des $ route-Objekts implementieren, um auf den erfolgreichen Abschluss einer Routenänderung zu warten.
Wenn Ihr Handler ausgelöst wird, erhalten Sie den Seitenschlüssel und suchen mit diesem Schlüssel nach Elementen, die für diese Seite "AKTIV" sein müssen, und wenden die Klasse AKTIV an.
Denken Sie daran, dass Sie eine Möglichkeit benötigen, ALLE Elemente "IN AKTIV" zu machen. Wie Sie sehen können, verwende ich die .pageKey-Klasse für meine Navigationselemente, um sie alle auszuschalten, und ich verwende die .pageKey_ {PAGEKEY}, um sie einzeln einzuschalten. Wenn Sie alle auf inaktiv umschalten, wird dies als naiver Ansatz angesehen. Möglicherweise erzielen Sie eine bessere Leistung, wenn Sie die vorherige Route verwenden, um nur aktive Elemente inaktiv zu machen, oder Sie können die Auswahlabfrage so ändern, dass nur aktive Elemente ausgewählt werden, die inaktiv gemacht werden sollen. Die Verwendung von jquery zur Auswahl aller aktiven Elemente ist wahrscheinlich die beste Lösung, da dadurch sichergestellt wird, dass im Falle von CSS-Fehlern, die möglicherweise auf der vorherigen Route aufgetreten sind, alles für die aktuelle Route bereinigt wird.
Was bedeuten würde, diese Codezeile zu ändern:
$(".pagekey").toggleClass("active", false);
zu diesem
$(".active").toggleClass("active", false);
Hier ist ein Beispielcode:
Gegeben eine Bootstrap Navbar von
<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>
Und ein Winkelmodul und eine Steuerung wie die folgende:
<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>