প্রথম এবং সর্বাগ্রে, এই সমস্যাটি অনেক উপায়ে সমাধান করা যেতে পারে। এই উপায়টি সবচেয়ে মার্জিত নাও হতে পারে তবে এটি সত্যই কাজ করে।
এখানে একটি সহজ সমাধান আপনার কোনও প্রকল্পে যুক্ত করতে সক্ষম হওয়া উচিত। আপনি যখন নিজের রুটটি কী-অফ করতে ব্যবহার করতে পারেন তখন কনফিগার করার সময় আপনি কেবল একটি "পেজকে" বা অন্য কোনও সম্পত্তি যুক্ত করতে পারেন। অতিরিক্তভাবে, আপনি কোনও রুট পরিবর্তনের সফল সমাপ্তির জন্য শোনার জন্য $ রুট অবজেক্টের $ রুটচ্যাঞ্জস্যাক্সেস পদ্ধতিতে শ্রোতার প্রয়োগ করতে পারেন।
যখন আপনার হ্যান্ডলারটি জ্বলতে থাকে তখন আপনি পৃষ্ঠা কীটি পান এবং এই পৃষ্ঠার জন্য "সক্রিয়" হওয়া দরকার এমন উপাদানগুলি সনাক্ত করতে সেই কীটি ব্যবহার করুন এবং আপনি অ্যাক্টিভ শ্রেণি প্রয়োগ করেন।
মনে রাখবেন আপনার সমস্ত উপাদান "IN ACTIVE" তৈরি করার একটি উপায় প্রয়োজন need আপনি দেখতে পাচ্ছেন যে আমি আমার এনএভি আইটেমগুলিতে সেগুলিকে বন্ধ করার জন্য। পৃষ্ঠার কী ক্লাসটি ব্যবহার করছি এবং আমি পৃথকভাবে সেগুলি চালু করার জন্য .পেজকি_ {পৃষ্ঠাগুলি using ব্যবহার করছি। এগুলিকে নিষ্ক্রিয় অবস্থায় সরিয়ে ফেলা, একটি নির্বোধ দৃষ্টিভঙ্গি হিসাবে বিবেচিত হবে, সম্ভবত আপনি কেবলমাত্র সক্রিয় আইটেমগুলিকে নিষ্ক্রিয় করতে পূর্ববর্তী রুটটি ব্যবহার করে আরও ভাল পারফরম্যান্স পাবেন, অথবা আপনি সক্রিয় আইটেমকে নিষ্ক্রিয় করার জন্য কেবল জিকারি নির্বাচককে পরিবর্তন করতে পারেন। সমস্ত সক্রিয় আইটেম নির্বাচন করতে jquery ব্যবহার করা সম্ভবত সেরা সমাধান কারণ এটি নিশ্চিত করে যে পূর্ববর্তী রুটে উপস্থিত থাকা কোনও CSS বাগের ক্ষেত্রে বর্তমান রুটের জন্য সমস্ত কিছু পরিষ্কার করা হয়েছে।
যার অর্থ কোডের এই লাইনটি পরিবর্তন করা হবে:
$(".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>