Angular-ui-router: ui-sref-active và trạng thái lồng nhau

Tôi đang sử dụng angular-ui-routervà các trạng thái lồng nhau trong ứng dụng của mình và tôi cũng có thanh điều hướng. Thanh điều hướng được viết tay và sử dụng ui-sref-activeđể đánh dấu trạng thái hiện tại. Nó là một thanh điều hướng hai cấp.

Bây giờ, khi tôi tham gia, hãy nói rằng Products / Categoriestôi muốn cả hai Products(ở cấp 1) và Categories(ở cấp 2) được đánh dấu. Tuy nhiên, bằng cách sử dụng ui-sref-active, nếu tôi đang ở trạng thái Products.Categoriesthì chỉ trạng thái đó được tô sáng, không Products.

Có một số cách để tạo Productsđiểm nhấn trong trạng thái đó?

Thay vì điều này-

<li ui-sref-active="active">
    <a ui-sref="posts.details">Posts</a>
</li>

Bạn có thể làm được việc này-

<li ng-class="{active: $state.includes('posts')}">
    <a ui-sref="posts.details">Posts</a>
</li>

Hiện tại nó không hoạt động. Có một cuộc thảo luận đang diễn ra ở đây ( https://github.com/angular-ui/ui-router/pull/927 ) Và, nó sẽ sớm được thêm vào.

CẬP NHẬT:

Đối với điều này để làm việc, $statenên có sẵn trong xem.

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);

Thêm thông tin

CẬP NHẬT [2]:

Kể từ phiên bản 0.2.11, nó hoạt động ngoài hộp. Vui lòng kiểm tra vấn đề liên quan: https://github.com/angular-ui/ui-router/issues/818

Đây là một tùy chọn khi bạn lồng ghép nhiều trạng thái không liên quan đến thứ bậc và bạn không có sẵn bộ điều khiển cho chế độ xem. Bạn có thể sử dụng bộ lọc UI-Router bao gồmByState để kiểm tra trạng thái hiện tại của mình so với bất kỳ số trạng thái được đặt tên nào.

<a ui-sref="production.products" ng-class="{active: ('production.products' | 
includedByState) || ('planning.products' | includedByState) || 
('production.categories' | includedByState) || 
('planning.categories' | includedByState)}">
  Items
</a>

TL; DR: Nhiều trạng thái được đặt tên, không liên quan, cần áp dụng một lớp đang hoạt động trên cùng một liên kết và bạn không có bộ điều khiển? Sử dụng bao gồmByState .

Đây là giải pháp:

<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
     <a ui-sref="project.details">Details</a>
</li>

Biên tập:

Ở trên chỉ hoạt động cho đường dẫn tuyến chính xác và sẽ không áp dụng ActiveStyle cho các tuyến đường lồng nhau. Giải pháp này sẽ hoạt động cho điều này:

<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>

Giả sử cây url như sau:

app (for home page) -> app.products -> app.products.category

việc sử dụng:

<li ui-sref-active="active">
    <a ui-sref="app.products">Products</a>
</li>

Bây giờ, khi bạn nhấn vào products : chỉ các sản phẩm sẽ hoạt động.

nếu bạn nhấn vào category : cả sản phẩm và danh mục sẽ hoạt động.

nếu bạn chỉ muốn danh mục hoạt động nếu bạn nhấn vào nó, bạn nên sử dụng: ui-sref-active-eq trên các sản phẩm, có nghĩa là chỉ nó sẽ hoạt động chứ không phải là trẻ em.

cách sử dụng thích hợp trong 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('/');
    });

Rất đơn giản, Bước 1: Thêm Bộ điều khiển cho thanh điều hướng của bạn hoặc bộ điều khiển hiện có của bạn nơi thanh điều hướng được bao gồm, thêm phần sau

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
        $scope.isActive = function(destination) {
        return destination === $location.path();
    }

}]);

Bước 2: Trong thanh điều hướng của bạn

<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>

Đó là nó.

Bộ định tuyến giao diện người dùng . Đoạn mã để làm cho thanh điều hướng của bạn hoạt động.

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);
}

Inside courseView.HTML

<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>

Nút này hiện diện bên trong Chế độ xem khóa học điều hướng bạn đến Chế độ xem tiếp theo tức là blog. và làm nổi bật thanh điều hướng của bạn.

tìm ví dụ tương tự, một ứng dụng ui-router góc cạnh demo: https://github.com/vineetsagar7/Angualr-UI-Router

Mã của tôi được điều hướng từ / productGroups đến / productPartitions, đây là cách duy nhất để truy cập chế độ xem "productPartitions".

Vì vậy, tôi đã thêm một neo ẩn với ui-sref cũng được đặt thành "productPartitions" trong cùng một mục danh sách có ui-sref-active

<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>

Bây giờ, nút điều hướng productGroups vẫn hoạt động khi truy cập một trong hai chế độ xem

Đây là những gì tôi đã làm để đạt được điều tương tự. Trạng thái gốc là "app.message" và không khai báo là trừu tượng.

Các trạng thái con là "app.message.draft", "app.message.all", "app.message.sent".

Liên kết điều hướng của tôi -

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

Xác định các tuyến đường / liên kết con cái của bạn.

và cập nhật trong cấu hình-

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