Her şeyden önce, bu sorun birçok şekilde çözülebilir. Bu şekilde en zarif olmayabilir, ancak cerntainly çalışır.
İşte herhangi bir projeye ekleyebileceğiniz basit bir çözüm. Rotanızı yapılandırmak için tuşunu kapatmak için kullanabileceğiniz bir "pageKey" veya başka bir özellik ekleyebilirsiniz. Ayrıca, bir rota değişikliğinin başarıyla tamamlandığını dinlemek için $ route nesnesinin $ routeChangeSuccess yöntemine bir dinleyici uygulayabilirsiniz.
İşleyiciniz tetiklendiğinde sayfa anahtarını alırsınız ve bu anahtarı bu sayfa için "AKTİF" olması gereken öğeleri bulmak için kullanırsınız ve ACTIVE sınıfını uygularsınız.
TÜM öğeleri "AKTİF" yapmak için bir yol gerektiğini unutmayın. Gördüğünüz gibi hepsini kapatmak için nav öğelerimde .pageKey sınıfını kullanıyorum ve tek tek açmak için .pageKey_ {PAGEKEY} kullanıyorum. Hepsini etkin olmayan olarak değiştirmek, naif bir yaklaşım olarak değerlendirilir, potansiyel olarak yalnızca etkin öğeleri devre dışı bırakmak için önceki rotayı kullanarak daha iyi performans elde edersiniz veya jquery seçiciyi yalnızca etkin olmayan yapılacak öğeleri seçmek için değiştirebilirsiniz. Tüm etkin öğeleri seçmek için jquery kullanmak muhtemelen en iyi çözümdür, çünkü önceki rotada mevcut olabilecek herhangi bir css hatası olması durumunda her şeyin mevcut yol için temizlenmesini sağlar.
Bu, bu kod satırını değiştirmek anlamına gelir:
$(".pagekey").toggleClass("active", false);
buna
$(".active").toggleClass("active", false);
İşte bazı örnek kod:
Bir bootstrap navbar verildi
<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>
Ve aşağıdaki gibi bir açısal modül ve kontrolör:
<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>