Đầu tiên và quan trọng nhất, vấn đề này có thể được giải quyết bằng nhiều cách. Cách này có thể không phải là thanh lịch nhất, nhưng nó chắc chắn hoạt động.
Đây là một giải pháp đơn giản mà bạn có thể thêm vào bất kỳ dự án nào. Bạn chỉ có thể thêm "pageKey" hoặc một số thuộc tính khác khi bạn định cấu hình tuyến đường mà bạn có thể sử dụng để khóa. Ngoài ra, bạn có thể triển khai trình nghe trên phương thức $ routeChangeSuccess của đối tượng $ route để lắng nghe việc hoàn thành thay đổi tuyến.
Khi trình xử lý của bạn kích hoạt, bạn nhận được khóa trang và sử dụng phím đó để xác định các phần tử cần là "HOẠT ĐỘNG" cho trang này và bạn áp dụng lớp HOẠT ĐỘNG.
Hãy nhớ rằng bạn cần một cách để làm cho TẤT CẢ các yếu tố "TRONG HOẠT ĐỘNG". Như bạn có thể thấy tôi đang sử dụng lớp .pageKey trên các mục điều hướng của mình để tắt tất cả chúng và tôi đang sử dụng .pageKey_ {PAGEKEY} để bật chúng riêng lẻ. Chuyển tất cả sang không hoạt động, sẽ được coi là một cách tiếp cận ngây thơ, có khả năng bạn sẽ có hiệu suất tốt hơn bằng cách sử dụng tuyến trước đó để chỉ các mục hoạt động không hoạt động hoặc bạn có thể thay đổi bộ chọn jquery để chỉ chọn các mục hoạt động để không hoạt động. Sử dụng jquery để chọn tất cả các mục hoạt động có lẽ là giải pháp tốt nhất vì nó đảm bảo mọi thứ được dọn sạch cho tuyến đường hiện tại trong trường hợp có bất kỳ lỗi css nào có thể có trên tuyến trước đó.
Điều đó có nghĩa là thay đổi dòng mã này:
$(".pagekey").toggleClass("active", false);
cái này
$(".active").toggleClass("active", false);
Đây là một số mã mẫu:
Đưa ra một thanh điều hướng bootstrap của
<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>
Và một mô-đun góc và bộ điều khiển như sau:
<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>