Угловой пользовательский маршрутизатор: Как получить родительский вид, чтобы быть «активным» при навигации на вложенный вид?

StackOverflow https://stackoverflow.com//questions/22054391

Вопрос

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

http://plnkr.co/edit/2coeds?p=preview .

По умолчанию (или если вы нажмете на него) Маршрут 1 «Active».Когда вы нажимаете на «Показать список», вы увидите, что маршрут 1 больше не активен.

Редактировать:

Единственная разница между этим примером и моим фактическим проектом заключается в том, что меню навигации в моем фактическом проекте имеет свой собственный контроллер, и поэтому не использует ту же спецификацию, что и контроллер для «Route1».

Это было полезно?

Решение

Редактировать для обновленного UI-маршрутизатора 0.2.13:

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

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

<Сильный> Оригинальный ответ:

См. Открытое пользовательское интернет-маршрутизатор: https://github.com/angular-ui/ui-orouter/issues/704 818

Общие общие обходные пути предлагают: 

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

Конечно, $ State должен быть добавлен в $ Case.См. Обновлен Plunk: http://plnkr.co/edit/khldjp?p=preview

Другие советы

Вы имеете неправильное понимание UI-SREF-Active= «Active» 

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

Это покажет специальные CSS, подчеркивая только тогда, когда вы находитесь в государственном маршруте1 (ссылка https://github.com/angular-ui/ui-Router/wiki/Quick-Reference#Wiki-i-sref-Active ). Это так, когда вы нажимаете на маршрут 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, но и PlateParams, следовательно, когда вы идете на поддержание, больше не изменяет CSS. Из Sourcecode становится яснее. 

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

Угловой пользовательский интернет-маршрутизатор теперь поддерживает эту родом.См. Compry https://github.com/angular-ui/ui-orouter/commit/ bf163ad6ce176ce28792696c8302d7cdf5c05a01

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

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

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

$scope.state = $state;
.

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

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

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

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

У нас уже есть решение без какого-либо «Hack» здесь / P >.

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

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"
})
.

Я пришел сюда 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, имея Кнопка меню «Active» состояния выглядит разной, отличающая ее из неактивных пунктов меню.

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

Я надеюсь, что это то, что вы искали. Поместите родительский URL в классе списка, теперь всякий раз, когда вы навигаете на родительский класс Child Class, будут активны

Шаг 1: Добавьте контроллер для вашего навигационного стержня Oy orian существующий контроллер, где включен NAV-бар, добавьте следующее 

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

Это это.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top