सबसे पहले और सबसे महत्वपूर्ण, इस समस्या को बहुत तरीकों से हल किया जा सकता है। यह तरीका सबसे सुरुचिपूर्ण नहीं हो सकता है, लेकिन यह सावधानी से काम करता है।
यहां एक सरल समाधान है जिसे आपको किसी भी परियोजना में जोड़ने में सक्षम होना चाहिए। जब आप अपने मार्ग को कॉन्फ़िगर करते हैं, जिसका उपयोग आप कुंजी बंद करने के लिए कर सकते हैं, तो आप केवल "पेजकेय" या कुछ अन्य संपत्ति जोड़ सकते हैं। इसके अतिरिक्त, आप एक मार्ग परिवर्तन के सफल समापन के लिए सुनने के लिए $ मार्ग वस्तु के $ मार्ग परिवर्तन के एक श्रोता को लागू कर सकते हैं।
जब आपका हैंडलर फायर करता है तो आपको पृष्ठ कुंजी मिलती है, और इस कुंजी का उपयोग उन तत्वों का पता लगाने के लिए किया जाता है, जिन्हें इस पृष्ठ के लिए "सक्रिय" होने की आवश्यकता होती है, और आप सक्रिय वर्ग को लागू करते हैं।
ध्यान रखें कि आपको सभी तत्वों को "सक्रिय" बनाने का एक तरीका चाहिए। जैसा कि आप देख सकते हैं कि मैं अपने नेवी आइटम्स पर .pageKey क्लास का उपयोग कर रहा हूं ताकि वे सभी बंद हो जाएं, और मैं व्यक्तिगत रूप से उन्हें चालू करने के लिए .pageKey_ {PAGEKEY} का उपयोग कर रहा हूं। उन सभी को निष्क्रिय करने के लिए स्विच करना, एक भोली दृष्टिकोण माना जाएगा, संभवतः आप केवल सक्रिय आइटम को निष्क्रिय बनाने के लिए पिछले मार्ग का उपयोग करके बेहतर प्रदर्शन प्राप्त करेंगे, या आप केवल चयन किए जाने वाले सक्रिय आइटमों को निष्क्रिय करने के लिए jquery चयनकर्ता को बदल सकते हैं। सभी सक्रिय वस्तुओं का चयन करने के लिए jquery का उपयोग करना शायद सबसे अच्छा समाधान है क्योंकि यह सुनिश्चित करता है कि पिछले रूट पर मौजूद किसी भी सीएसएस बग के मामले में वर्तमान मार्ग के लिए सब कुछ साफ हो जाए।
इसका मतलब होगा कि कोड की इस लाइन को बदलना:
$(".pagekey").toggleClass("active", false);
यह एक करने के लिए
$(".active").toggleClass("active", false);
यहाँ कुछ नमूना कोड है:
के बूटस्ट्रैप नेवरबार को देखते हुए
<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>
और निम्न की तरह एक कोणीय मॉड्यूल और नियंत्रक:
<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>