Angular UI Router: Как получить родительское представление "активно" при навигации к вложенному представлению?

Ответ 1

EDIT Для обновленного ui-router 0.2.13:

ui-sref-active="active" теперь устанавливает класс "active", когда текущее состояние является состоянием ui-sref или любым дочерним

ui-sref-active-eq="active" ведет себя как предыдущие итерации ui-sref-active и устанавливает класс для точного состояния

Исходный ответ:

См. открытые проблемы с ui-router: https://github.com/angular-ui/ui-router/issues/704 и 818

Общими обходными людьми, которые предлагают люди, являются:

ng-class="{active:$state.includes('route1')}"

Конечно, $state должно быть добавлено в $scope. См. Обновленный список: http://plnkr.co/edit/KHLDJP?p=preview

Ответ 2

У вас неправильное понимание ui-sref-active = "active"

<li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>

Это покажет специальное выделение css только тогда, когда вы находитесь в состоянии route1 (ссылка https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-ui-sref-active). Это происходит, когда вы нажимаете на маршрут 1. Но когда вы нажимаете "Показать список", вы больше не находитесь в маршруте1. Скорее вы находитесь в состоянии "route1.list". Вы можете проверить это, написав следующий код. Это строго для понимания того, как работает государство.

JS

внутренний контроллер

$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html

внутри html

{{currentState}}

Если вы внимательно посмотрите на документацию ui-sref-active, она не только смотрит на stateName, но и stateParams, поэтому, когда вы идете на подзаголовок, он больше не изменяет css. Из исходного кода становится понятнее.

 function update() {
        if ($state.$current.self === state && matchesParams()) {
          $element.addClass(activeClass);
        } else {
          $element.removeClass(activeClass);
        }// route1===route1.list will not be true.

чтобы решить проблему, помните, что переменные области наследуются в вложенных представлениях.

внутри контроллера маршрута.

$scope.route1Active = true;

в html

<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>

Ответ 3

Angular Теперь пользовательский интерфейс теперь поддерживает это. См. Commit https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01

Ответ 4

Моим решением было установить:

<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">

Состояние уже было добавлено в область контроллера:

$scope.state = $state;

Ответ 5

Вам не нужно ничего делать в контроллерах. Вот мой пример кода:

    <ul class="nav nav-pills nav-stacked" role="tablist">
        <li ui-sref-active="active"><a ui-sref="Booking.Step1" href="#/Booking/Step1">Step1</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step2" href="#/Booking/Step2" >Step2</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step3" href="#/Booking/Step3">Step3</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step4" href="#/Booking/Step4">Step4</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step5" href="#/Booking/Step5">Step5</a></li>
    </ul>

В конфигурации маршрута:

$stateProvider.state('Booking', {
        abstract: true,
        url: '/Booking',
        templateUrl: "TourApp/Templates/Booking/SideMenu.html",
        controller: "SideMenuController"
    });

    $stateProvider.state('Booking.Step1', {
        url: "/Step1",
        views: {
            'content': {
                templateUrl: "TourApp/Templates/Booking/Step1.html",
                controller: "Step1Controller"
            }
        }
    });

    $stateProvider.state('Booking.Step2', {
        url: "/Step2",
        views: {
            'content': {
                templateUrl: "TourApp/Templates/Booking/Step2.html",
                controller: "Step2Controller"
            }
        }
    });

Ответ 6

У нас уже есть решение без "взлома" ЗДЕСЬ

Это способ сделать:

HTML >

 <li ui-sref-active="active" >
   <a href="#" class="submenu" ui-sref="bands">
       <i class="fa fa-location-arrow" aria-hidden="true"></i>
                     Bands
           <span class="fa fa-chevron-down"></span>
   </a>

   <ul class="nav child_menu">
        <li ui-sref-active="active">
            <a  ui-sref="bands.nirvana">
                 Nirvana   
            </a>
       </li>
       <li ui-sref-active="active">
            <a  ui-sref="bands.iron">
                Iron
            </a>
       </li>
       <li ui-sref-active="active">
            <a  ui-sref="bands.metalica">
                Metalica
            </a>
       </li>           
  </ul>

Конфигурация нашего маршрутизатора будет выглядеть следующим образом:

$stateProvider.state('bands', {
    abstract: true,
    url: '/bands',
    templateUrl: "myapp/categories/template.bands.html", //<ui-view></ui-view> 
    controller: "SomeController as vm"
}).state('bands.nirvana', {
    url: '/nirvana',
    templateUrl: "myapp/categories/band.nirvana.html",
    controller: "SomeController as vm"
}).state('bands.iron', {
    url: '/iron',
    templateUrl: "myapp/categories/band.iron.html",
    controller: "SomeController as vm"
}).state('bands.meatlica', {
    url: '/metalica',
    templateUrl: "myapp/categories/band.metalica.html",
    controller: "SomeController as vm"
})

Ответ 7

Я пришел сюда через 2 года, вопрос был задан, но angular-ui-router имеет много навыков в решении этой проблемы. Он также работал для вложенных состояний.

<ul>
  <li ui-sref-active="active" class="item">
    <a ui-sref="home">Home</a>
  </li>
  <!-- ... -->
</ul>

Когда приложение переходит в состояние home, это приведет к появлению следующего HTML:

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="home">Home</a>
  </li>
  <!-- ... -->
</ul>

ui-sref-active quick reference:

Директива, работающая вместе с ui-sref для добавления классов к элементу когда соответствующее директивное состояние ui-sref активно, и удаление их, когда он неактивен. Основным вариантом использования является упрощение особый внешний вид навигационных меню, основанных на ui-sref, путем кнопка "активное" состояние отображается по-разному, различая ее из неактивных пунктов меню.

Полная документация.

Ответ 8

Теперь они обновились, и новый способ сделать это

 <a ui-sref-active="{'active': 'main.app.manage.**'}" ui-sref="main.app.manage.people.list"></a>

Ниже находится файл состояния

 angular.module('manage.people', ['people.invite'])
  .config(['$stateProvider', function($stateProvider) {
    $stateProvider
      .state('main.app.manage.people', {
        url: '/people',
        abstract: true,
        cache: false,
        views: {
          'tabContent': {
            template: '<div ui-view="peopleContent"></div>',
            controller: 'peopleController'
          }
        }
      })
      .state('main.app.manage.people.list', {
        url: '/list',
        views: {
          'peopleContent': {
            templateUrl: '/internal/main/app/manage/people/views/people.html',
            controller: 'peopleListController'
          }
        }
      });

Ответ 9

Надеюсь, это то, что вы искали. Добавьте родительский url в класс list, теперь, когда вы переходите к родительскому классу дочернего класса, будет активным

Шаг 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>

Вот оно.