Angular-ui-router : ui-sref-active 및 중첩 상태

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 탐색 단추가 활성 상태로 유지됩니다.

여기서 내가 똑같은 것을 달성하기 위해 한 일. 상위 상태는 "app.message"이며 추상으로 선언하지 않습니다.

하위 상태는 "app.message.draft", "app.message.all", "app.message.sent"입니다.

내 탐색 링크-

<a ui-sref-active="active-menu" ui-sref="app.message">Messages</a>

자녀의 경로 / 링크를 정의하십시오.

및 구성에서 업데이트

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
                if (toState.name === 'app.message') {
                    event.preventDefault();
                    $state.go('app.message.draft');
                    return;
                }
            });