ก่อนอื่นปัญหานี้สามารถแก้ไขได้หลายวิธี วิธีนี้อาจไม่ได้หรูหราที่สุด แต่ก็ใช้งานได้อย่างแน่นอน
นี่เป็นวิธีง่ายๆที่คุณควรจะเพิ่มในโครงการใด ๆ คุณสามารถเพิ่ม "pageKey" หรือคุณสมบัติอื่น ๆ เมื่อคุณกำหนดค่าเส้นทางของคุณที่คุณสามารถใช้เพื่อปิดการใช้งาน นอกจากนี้คุณสามารถใช้ฟังในวิธี $ routeChangeSuccess ของวัตถุ $ route เพื่อรับฟังความสำเร็จของการเปลี่ยนเส้นทางที่สำเร็จ
เมื่อตัวจัดการของคุณเริ่มทำงานคุณจะได้รับรหัสของหน้าและใช้ปุ่มนั้นเพื่อค้นหาองค์ประกอบที่ต้องเป็น "ACTIVE" สำหรับหน้านี้และคุณจะใช้คลาส ACTIVE
โปรดทราบว่าคุณต้องการวิธีที่จะทำให้องค์ประกอบทั้งหมด "ใช้งานได้" อย่างที่คุณเห็นฉันกำลังใช้คลาส. pageKey บนรายการ nav ของฉันเพื่อปิดทั้งหมดและฉันใช้. pageKey_ {PAGEKEY} เพื่อเปิดแต่ละรายการ การเปลี่ยนพวกเขาทั้งหมดเป็นไม่ได้ใช้งานจะถือว่าเป็นวิธีการที่ไร้เดียงสาคุณอาจได้รับประสิทธิภาพที่ดีขึ้นโดยใช้เส้นทางก่อนหน้าเพื่อสร้างเฉพาะรายการที่ไม่ได้ใช้งานเท่านั้นหรือคุณสามารถเปลี่ยนตัวเลือก jquery เพื่อเลือกรายการที่ใช้งาน การใช้ jquery เพื่อเลือกไอเท็มที่ใช้งานอยู่ทั้งหมดน่าจะเป็นทางออกที่ดีที่สุดเพราะมันจะทำให้ทุกอย่างสะอาดขึ้นสำหรับเส้นทางปัจจุบันในกรณีที่มีข้อผิดพลาด css ใด ๆ ที่อาจมีอยู่ในเส้นทางก่อนหน้านี้
ซึ่งจะหมายถึงการเปลี่ยนรหัสบรรทัดนี้:
$(".pagekey").toggleClass("active", false);
ถึงอันนี้
$(".active").toggleClass("active", false);
นี่คือตัวอย่างรหัสบางส่วน:
รับ bootstrap navbar ของ
<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>