Angular UI 라우터 : 중첩보기로 탐색 할 때 부모 뷰를 "활성"으로 가져 오는 방법은 무엇입니까?
-
21-12-2019 - |
문제
UI 라우터를 구현 한 프로젝트에서 작업하고 있으며 ui-sref-active="active"
를 사용하여 해당 항목이 현재 경로 인 경우 탐색 메뉴 항목에 활성 클래스를 추가합니다.그러나 해당보기에서 중첩 된보기로 이동하면 상위 메뉴 항목이 더 이상 활성화되지 않습니다.다음 Plunker를 참조하십시오 :
http://plnkr.co/edit/2coeds?p=preview <./ P>
기본적으로 (또는 클릭하면) Route 1은 "Active"입니다."목록보기"를 클릭하면 경로 1이 더 이상 작동하지 않습니다.
편집 :
이 예제와 실제 프로젝트의 유일한 차이점은 실제 프로젝트의 탐색 메뉴가 자체 컨트롤러를 가지고 있으므로 "Route1"의 컨트롤러와 동일한 범위를 사용하지 않는다는 것입니다.
해결책
업데이트 된 UI-Router 0.2.13의 편집 :
ui-sref-active="active"
는 현재 현재 상태가 UI-SREF의 상태 또는 모든 어린이
ui-sref-active-eq="active"
는 ui-sref-active의 이전 반복으로 작동하며 정확한 상태의 클래스 만 설정합니다
원래 답변 :
열기 UI-Router 문제를 참조하십시오. https://github.com/angular-ui/ui-router/issues/704 및 818
일반적인 해결 방법 사람이 제안됩니다 :
ng-class="{active:$state.includes('route1')}"
.
물론 $ State는 $ Scope에 추가해야합니다.업데이트 된 Plunk : http://plnkr.co/edit/khldjp?p=preview
다른 팁
ui-sref-active="active"
에 대한 잘못된 이해가 잘못되었습니다.<li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>
.
상태 Route1에있을 때만 특별한 CSS를 보여줍니다 (참조 https://github.com/angular-ui/ui-router/wiki/quick-reference#wiki-ui-sref-siactive ). 라우트 1을 클릭 할 때의 경우가 있지만 "목록보기"를 클릭하면 더 이상 Route1이 아닙니다. 오히려 당신은 주 "route1.list"에 있습니다. 다음 코드를 작성 하여이 문제를 확인할 수 있습니다. 이것은 주정부가 어떻게 작동하는지 이해하기위한 것입니다.
js
내부 컨트롤러
$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html
.
html 내부
{{currentState}}
.
UI-SREF 활성의 설명서를 자세히 살펴보면 StateName뿐만 아니라 StateParams뿐만 아니라 STEAPARAMS도 더 이상 CSS를 변경하지 않습니다. SourceCode에서 더 명확 해집니다.
function update() {
if ($state.$current.self === state && matchesParams()) {
$element.addClass(activeClass);
} else {
$element.removeClass(activeClass);
}// route1===route1.list will not be true.
.
문제를 해결하려면 범위 변수가 중첩 된 뷰에서 상속됩니다.
경로 제어기 내부.
$scope.route1Active = true;
.
html
<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>
. Angular UI 라우터는 이제 기본적 으로이 기능을 지원합니다. https://github.com/angular-ui/ui-router/commit./ bf163ad6ce176ce28792696C8302D7CDF5C05A01
내 해당 솔루션이 설정되어야했습니다 :
<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">
.
상태는 이전에 컨트롤러의 범위에 추가되었습니다.
$scope.state = $state;
. 컨트롤러에서 어떤 일을 할 필요가 없습니다.다음은 예제 코드입니다.
<ul class="nav nav-pills nav-stacked" role="tablist">
<li ui-sref-active="active"><a ui-sref="Booking.Step1" href="#/Booking/Step1">Step1</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step2" href="#/Booking/Step2" >Step2</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step3" href="#/Booking/Step3">Step3</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step4" href="#/Booking/Step4">Step4</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step5" href="#/Booking/Step5">Step5</a></li>
</ul>
.
경로 구성 :
$stateProvider.state('Booking', {
abstract: true,
url: '/Booking',
templateUrl: "TourApp/Templates/Booking/SideMenu.html",
controller: "SideMenuController"
});
$stateProvider.state('Booking.Step1', {
url: "/Step1",
views: {
'content': {
templateUrl: "TourApp/Templates/Booking/Step1.html",
controller: "Step1Controller"
}
}
});
$stateProvider.state('Booking.Step2', {
url: "/Step2",
views: {
'content': {
templateUrl: "TourApp/Templates/Booking/Step2.html",
controller: "Step2Controller"
}
}
});
. 이제 그들은 업데이트되었고 새로운 방법은
입니다. <a ui-sref-active="{'active': 'main.app.manage.**'}" ui-sref="main.app.manage.people.list"></a>
.
아래의 상태 파일은
angular.module('manage.people', ['people.invite'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('main.app.manage.people', {
url: '/people',
abstract: true,
cache: false,
views: {
'tabContent': {
template: '<div ui-view="peopleContent"></div>',
controller: 'peopleController'
}
}
})
.state('main.app.manage.people.list', {
url: '/list',
views: {
'peopleContent': {
templateUrl: '/internal/main/app/manage/people/views/people.html',
controller: 'peopleListController'
}
}
});
. 그것은 할 수있는 방법 :
html>
<li ui-sref-active="active" >
<a href="#" class="submenu" ui-sref="bands">
<i class="fa fa-location-arrow" aria-hidden="true"></i>
Bands
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li ui-sref-active="active">
<a ui-sref="bands.nirvana">
Nirvana
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.iron">
Iron
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.metalica">
Metalica
</a>
</li>
</ul>
.
우리의 라우터 구성은 다음과 같습니다>
$stateProvider.state('bands', {
abstract: true,
url: '/bands',
templateUrl: "myapp/categories/template.bands.html", //<ui-view></ui-view>
controller: "SomeController as vm"
}).state('bands.nirvana', {
url: '/nirvana',
templateUrl: "myapp/categories/band.nirvana.html",
controller: "SomeController as vm"
}).state('bands.iron', {
url: '/iron',
templateUrl: "myapp/categories/band.iron.html",
controller: "SomeController as vm"
}).state('bands.meatlica', {
url: '/metalica',
templateUrl: "myapp/categories/band.metalica.html",
controller: "SomeController as vm"
})
. 여기에 2 년 후에 질문이 묻지 않았지만 angular-ui-router
는이 문제를 해결하는 데 훨씬 능숙한 접근법을 가지고 있습니다.중첩 상태도 작동했습니다.
<ul>
<li ui-sref-active="active" class="item">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
.
앱이 home
상태로 탐색 할 때 이는 HTML이 어떻게 표시되는지입니다.
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
.
ui-sref-active 빠른 참조 :
ui-sref와 함께 지침 작업을 수행하여 요소에 클래스를 추가합니다. 관련 UI-Sref 지시문의 상태가 활성화되고 제거 될 때 그것이 비활성 상태 일 때.기본 사용 사례는 그를 단순화하는 것입니다 탐색 메뉴의 특별한 외관은 UI-Sref에 의존하여 "활성"상태의 메뉴 버튼이 다른 것처럼 보이고 구별됩니다. 비활성 메뉴 항목에서
완전한 문서. / P>
이것이 당신이 찾고있는 것입니다. 목록 클래스의 상위 URL을 마치면, 하위 클래스 상위 클래스로 이동할 때마다 활성화됩니다
1 단계 : NAV 바에 대한 컨트롤러 추가 NAV 바가 포함 된 기존 컨트롤러에있는 기존 컨트롤러가 다음을 추가합니다.
app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);
.
step2 : NAV 바에서
<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>
.
.