우선,이 문제는 많은 방법으로 해결 될 수 있습니다. 이 방법은 가장 우아하지는 않지만 확실히 작동합니다.
다음은 모든 프로젝트에 추가 할 수있는 간단한 솔루션입니다. 키 오프에 사용할 경로를 구성 할 때 "pageKey"또는 다른 속성을 추가하면됩니다. 또한 $ route 객체의 $ routeChangeSuccess 메서드에서 리스너를 구현하여 경로 변경이 성공적으로 완료되었음을 수신 할 수 있습니다.
핸들러가 시작되면 페이지 키를 얻고이 키를 사용하여이 페이지에 대해 "ACTIVE"여야하는 요소를 찾고 ACTIVE 클래스를 적용하십시오.
모든 요소를 "활성 상태"로 만드는 방법이 필요합니다. 보시다시피 내 탐색 항목에서 .pageKey 클래스를 사용하여 모든 항목을 끄고 .pageKey_ {PAGEKEY}를 사용하여 개별적으로 켤 수 있습니다. 그것들을 모두 비활성으로 전환하는 것은 순진한 접근 방식으로 간주되며 잠재적으로 이전 경로를 사용하여 활성 항목 만 비활성 상태로 만들거나 jquery 선택기를 변경하여 활성 항목 만 선택하여 비활성 상태로 만들 수 있습니다. jquery를 사용하여 모든 활성 항목을 선택하는 것이 가장 좋은 솔루션 일 것입니다. 이전 경로에있을 수있는 CSS 버그가있는 경우 현재 경로에 대한 모든 것이 정리되도록하기 때문입니다.
이 코드 줄을 변경한다는 의미는 다음과 같습니다.
$(".pagekey").toggleClass("active", false);
이것에
$(".active").toggleClass("active", false);
샘플 코드는 다음과 같습니다.
부트 스트랩 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>