Angular UI Router: Wie bekomme ich die übergeordnete Ansicht, wenn ich zur verschachtelten Ansicht navigiere?

Sie haben ein falsches Verständnis von ui-sref-active = "active"

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

Dies wird nur dann hervorgehoben, wenn Sie sich im Zustand route1 befinden (Referenz https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-ui-sref-active ). Dies ist der Fall, wenn Sie auf Route 1 klicken. Wenn Sie jedoch auf "Liste anzeigen" klicken, befinden Sie sich nicht mehr in route1 . Sie befinden sich stattdessen im Status "route1.list". Sie können dies überprüfen, indem Sie den folgenden Code schreiben. Dies dient ausschließlich dem Verständnis der Funktionsweise von Staat.

js

im Controller

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

in HTML

{{currentState}}

Wenn Sie sich die Dokumentation von ui-sref-active genau ansehen, werden nicht nur stateName, sondern auch stateParams betrachtet. Wenn Sie also die Unterposition verwenden, ändert sich dies nicht mehr. Aus dem Quellcode wird es klarer.

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

um das Problem zu lösen, denken Sie daran, dass Bereichsvariablen in verschachtelten Ansichten vererbt werden.

im Controller der Route.

$scope.route1Active = true;

in HTML

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

Angular UI Router unterstützt dies nun nativ. Siehe Festschreiben https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01

Meine Lösung war zu setzen:

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

Der Status wurde dem Controller bereits zuvor hinzugefügt: 

$scope.state = $state;

Jetzt haben sie sich aktualisiert und der neue Weg ist, dies zu tun

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

Unten ist die Statusdatei

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

In den Controllern müssen Sie nichts tun. Hier ist mein Beispielcode:

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

In der Routenkonfiguration:

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

Wir haben bereits eine Lösung ohne "Hack" HIER

So geht's:

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>

Unsere Router-Konfiguration sieht dann so aus>

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

Ich bin zwei Jahre später hierher gekommen, die Frage wurde gestellt, aber angular-ui-router hat einen sehr kompetenten Ansatz, um dieses Problem zu lösen. Es funktionierte auch für verschachtelte Staaten.

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

Wenn die App zum home-Status navigiert, wird das folgende HTML angezeigt:

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

ui-sref-active Schnellreferenz:

Eine Direktive, die mit ui-sref zusammenarbeitet, um einem Element Klassen hinzuzufügen Wenn der Status der verwandten ui-sref-Direktive aktiv ist und .__ entfernt wird. sie, wenn es inaktiv ist. Der primäre Anwendungsfall ist die Vereinfachung von besonderes Aussehen von Navigationsmenüs, die auf ui-sref angewiesen sind, indem Die Menüschaltfläche des "aktiven" Zustands erscheint anders und unterscheidet sie aus den inaktiven Menüpunkten.

Komplette Dokumentation.

Ich hoffe, das ist, wonach Sie gesucht haben. Platzieren Sie die übergeordnete URL in der Listenklasse. Wenn Sie nun zur untergeordneten Klasse navigieren, wird die übergeordnete Klasse aktiviert

Schritt 1: Fügen Sie einen Controller für Ihre Navigationsleiste hinzu oder fügen Sie in Ihrem vorhandenen Controller, wo die Navigationsleiste enthalten ist, Folgendes hinzu

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
        $scope.isActive = function(destination) {
        return destination === $location.path();
    }

}]);

Schritt 2: In Ihrer Navigationsleiste

<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>

Das ist es.