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

82

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

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

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

paj28
источник

Ответы:

139

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

<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

Рифат
источник
1
Вы $stateспециально сделали доступным в прицеле вот так $rootScope.$state = $state?
JacobF 02
1
@jvannistelrooy Да. Обычно я ничего не кладу, $rootScopeно это исключение.
Rifat
2
Спасибо, что разместили этот ответ. Отлично работал для моего использования. В итоге я просто сопоставил метод include с областью действия моего контроллера ( $scope.includes = $state.includes), а не прикрепил весь $state.
richleland
31

Это вариант, когда вы вкладываете несколько состояний, которые не связаны иерархически, и у вас нет контроллера, доступного для представления. Вы можете использовать фильтр 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 .

Пончик
источник
Лучшее решение, если вы создаете ссылки меню, которые не следуют иерархии State. Также, если вы создаете родительский пункт меню в ссылке меню и не хотите создавать другой Stateтолько ради использования ui-sref-activeфункции. Я считаю, что Stateони предназначены для размещения HTML, а не для использования в ссылках меню.
Barun
Также работает в 1.0.0-beta.1, полезно для тех ссылок меню, как указано выше. У меня была боковая панель, которая ссылалась на одно из 4 дочерних состояний родительского абстрактного состояния. Присвоение имени только части имени абстрактного состояния работает должным образом при переключении между 4 состояниями-родственниками.
rccursach
Вы можете поместить всю эту логику в функцию :)
Coder
17

Это решение:

<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>
Холланд Рисли
источник
У меня есть четыре ссылки, по которым я хочу добавить активный класс, когда одна из них выбрана, что мне для этого нужно сделать. @ holland
Jot Dhaliwal
Или вы можете попробовать просто добавить data-ng-class="{ active: $state.includes('root.parent') к каждой из ссылок? Где activeимя класса.
Holland Risley
Сэкономил
11

Допустим, дерево 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
Должен быть отмечен как правильный ответ! Спасибо, ui-sref-active-eqработает отлично!
Максим Лафари
2

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

Это оно.


источник
0

Маршрутизатор пользовательского интерфейса . Фрагмент кода для активации панели навигации.

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>

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

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

виноградный сагар
источник
0

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

C Рудольф
источник
0

Вот что я сделал, чтобы добиться того же. Родительское состояние - «app.message» и не объявляется абстрактным.

Дочерние состояния - это «app.message.draft», «app.message.all», «app.message.sent».

Моя навигационная ссылка -

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

Определите маршруты / ссылки для ваших детей.

и обновить в config-

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
                if (toState.name === 'app.message') {
                    event.preventDefault();
                    $state.go('app.message.draft');
                    return;
                }
            });
Адитья Гупта
источник