Angular -ui-router: ui-sref-active и вложенные состояния

Я использую angular-ui-router и вложенные состояния в моем приложении, и у меня также есть панель навигации. Панель навигации написана вручную и использует ui-sref-active для выделения текущего состояния. Это двухуровневая панель навигации.

Теперь, когда я нахожусь, скажем Products / Categories, я хотел бы выделить как Products (в уровне 1), так и Categories (на уровне 2). Однако, используя ui-sref-active, если я состою в состоянии Products.Categories, тогда выделяется только это состояние, а не Products.

Есть ли способ сделать выделение Products в этом состоянии?

Ответ 1

Вместо этого -

<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), и он будет добавлен в ближайшее время.

UPDATE:

Чтобы это сработало, $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

Ответ 2

Здесь есть опция, когда вы вставляете несколько состояний, которые не связаны иерархически, и у вас нет контроллера, доступного для представления. Вы можете использовать фильтр UI-Router, включенныйByState, чтобы проверить ваше текущее состояние на любое количество названных состояний.

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

Ответ 3

Это решение:

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

Edit:

Вышеуказанное работает только для точного маршрута маршрута и не будет применять activeStyle к вложенным маршрутам. Это решение должно работать для этого:

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

Ответ 4

Предположим, что дерево 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('/');
    });

Ответ 5

Так просто, Шаг 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>

Вот оно.

Ответ 6

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>

Эта кнопка присутствует внутри курса View, которая перемещается к следующему Просмотр i.e в блоге. и делает вашу навигационную панель выделенной.

найти аналогичный пример, демонстрационное приложение angular ui-router: https://github.com/vineetsagar7/Angualr-UI-Router

Ответ 7

Мой код перемещался из /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 остается активной при доступе к обозревателю