angular-ui-router내 응용 프로그램에서 중첩 상태를 사용 하고 있으며 탐색 모음도 있습니다. 탐색 모음은 손으로 작성 ui-sref-active되며 현재 상태를 강조하는 데 사용 됩니다. 2 단계 탐색 모음입니다.
이제 Products / Categories내가 들어갈 때 Products(레벨 1에서)와 Categories(레벨 2에서) 모두 강조 표시 하고 싶습니다 . 그러나을 사용 ui-sref-active하면 내가 상태에 Products.Categories있으면 해당 상태 만 강조 표시되고 Products.
Products그 상태를 강조 할 수있는 방법이 있습니까?
답변
대신에
<li ui-sref-active="active">
<a ui-sref="posts.details">Posts</a>
</li>
넌 할 수있어-
<li ng-class="{active: $state.includes('posts')}">
<a ui-sref="posts.details">Posts</a>
</li>
현재는 작동하지 않습니다. 여기 ( https://github.com/angular-ui/ui-router/pull/927 ) 토론이 진행되고 있으며 곧 추가 될 예정입니다.
최신 정보:
이 작업을 수행하려면 $state보기에서 사용할 수 있어야합니다.
angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
$scope.$state = $state;
}]);
업데이트 [2] :
버전 0.2.11부터는 기본적으로 작동합니다. 관련 문제를 확인하세요 : https://github.com/angular-ui/ui-router/issues/818
답변
다음은 계층 적으로 관련되지 않은 여러 상태를 중첩하고 뷰에 사용할 수있는 컨트롤러가없는 경우에 대한 옵션입니다. UI- 라우터 필터 includedByState를 사용하여 이름이 지정된 상태 수에 대해 현재 상태를 확인할 수 있습니다.
<a ui-sref="production.products" ng-class="{active: ('production.products' |
includedByState) || ('planning.products' | includedByState) ||
('production.categories' | includedByState) ||
('planning.categories' | includedByState)}">
Items
</a>
요약 : 여러 개의 관련되지 않은 명명 된 상태는 동일한 링크에 활성 클래스를 적용해야하며 컨트롤러가 없습니까? includedByState를 사용하십시오 .
답변
이것이 해결책입니다.
<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
<a ui-sref="project.details">Details</a>
</li>
편집하다:
위의 내용은 정확한 경로 경로에 대해서만 작동하며 중첩 된 경로에 activeStyle을 적용하지 않습니다. 이 솔루션은 다음과 같이 작동합니다.
<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>
답변
URL 트리가 다음과 같다고 가정 해 보겠습니다.
app (for home page) -> app.products -> app.products.category
사용법 :
<li ui-sref-active="active">
<a ui-sref="app.products">Products</a>
</li>
이제를 누르면 products제품 만 활성화됩니다.
을 누르면 category: 제품과 카테고리가 모두 활성화됩니다.
눌렀을 때 카테고리 만 활성화되도록 ui-sref-active-eq하려면 제품에 다음을 사용해야합니다. 즉, 하위 항목이 아니라 해당 카테고리 만 활성화됩니다 .
app.js에서의 적절한 사용 :
angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: { ... }
})
// route for the aboutus page
.state('app.products', {
url:'products',
views: { ... }
})
// route for the contactus page
.state('app.products.category', {
url:'category',
views: { ... }
})
$urlRouterProvider.otherwise('/');
});
답변
매우 간단합니다. 1 단계 : 탐색 모음 또는 탐색 모음이 포함 된 기존 컨트롤러에 다음을 추가합니다.
app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);
2 단계 : 탐색 모음에서
<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>
그게 다야.
답변
UI 라우터 . 탐색 모음을 활성화하기위한 코드 스 니펫.
HTML
<li ui-sref-active="is-active" ui-nested><a ui-sref="course">Courses</a>
</li> <li ui-sref-active="is-active" ui-nested><a ui-sref="blog">blog</a></li>
CSS
is-active{
background-color: rgb(28,153,218);
}
courseView.HTML 내부
<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>
이 버튼은 다음보기 즉 블로그로 이동하는 코스보기 내에 있습니다. 내비게이션 바를 강조 표시합니다.
유사한 예제, 데모 각도 ui-router 앱 찾기 : https://github.com/vineetsagar7/Angualr-UI-Router
답변
내 코드는 / productGroups에서 / productPartitions로 이동했는데, 이것이 “productPartitions”보기에 액세스하는 유일한 방법입니다.
그래서 ui-sref가 활성화 된 동일한 목록 항목 내에서 ui-sref가 “productPartitions”로 설정된 숨겨진 앵커를 추가했습니다.
<li ui-sref-active="active">
<a ui-sref="productGroups">
<i class="fa fa-magic"></i> Product groups </a>
<a ui-sref="productPartitions" style="display:none;"></a>
</li>
이제 두보기 중 하나에 액세스 할 때 productGroups 탐색 단추가 활성 상태로 유지됩니다.
