Angular-ui-router: ui-sref-активний і вкладений стани

Я використовую angular-ui-routerта вкладені стани у своєму додатку, і у мене також є панель навігації. Панель навігації написана від руки та використовується ui-sref-activeдля виділення поточного стану. Це дворівнева панель навігації.

Тепер, коли я беру участь, скажіть, 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-Router includedByState, щоб перевірити ваш поточний стан щодо будь-якої кількості названих станів.

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

TL; DR: Кілька, не пов’язаних між собою, іменованих станів повинні застосувати активний клас до одного і того ж посилання, а у вас немає контролера? Використовуйте 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);
}

Inside courseView.HTML

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

Ця кнопка присутня в перегляді курсу, який переходить до наступного перегляду, тобто блогу. і робить вашу панель навігації виділеною.

знайти подібний приклад, демонстраційний додаток для кутового інтерфейсу користувача: https://github.com/vineetsagar7/Angualr-UI-Router

Мій код перемістився з / productGroups до / productPartitions, що є єдиним способом отримати доступ до подання "productPartitions".

Тому я додав прихований прив’язок з ui-sref, який також встановлений на "productPartitions" у тому самому елементі списку, що має 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>

Тепер кнопка навігації productGroups залишається активною під час доступу до будь-якого подання

Ось що я зробив, щоб досягти того ж. Батьківський стан - "app.message" і не оголошуйте як абстрактний.

Дочірні стани - "app.message.draft", "app.message.all", "app.message.sent".

My Nav Link -

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