wake-up-neo.com

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

Ich arbeite an einem Projekt, das den UI-Router implementiert hat, und verwendet ui-sref-active="active", um die aktive Klasse zum Navigationsmenüelement hinzuzufügen, wenn dieses Element die aktuelle Route ist. Wenn Sie jedoch zu einer verschachtelten Ansicht in dieser Ansicht navigieren, ist das übergeordnete Menüelement nicht mehr aktiv. Siehe den folgenden Plunker:

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

Standardmäßig (oder wenn Sie darauf klicken) ist Route 1 "aktiv". Wenn Sie auf "Show List" klicken, sehen Sie, dass Route 1 nicht mehr aktiv ist.

Bearbeiten:

Der einzige Unterschied zwischen diesem Beispiel und meinem aktuellen Projekt besteht darin, dass das Navigationsmenü in meinem aktuellen Projekt über eine eigene Steuerung verfügt und daher nicht denselben Bereich wie die Steuerung für "route1" verwendet.

19
Ian Walter

EDIT Für aktualisierte UI-Router 0.2.13:

ui-sref-active="active" setzt jetzt die 'aktive' Klasse, wenn der aktuelle Zustand der Zustand der Ui-Sref ist oder ein beliebiges Kind

ui-sref-active-eq="active" verhält sich wie die vorherigen Iterationen von ui-sref-active und legt nur die Klasse für den genauen Status fest

Ursprüngliche Antwort:

Siehe Probleme mit dem offenen UI-Router: https://github.com/angular-ui/ui-router/issues/704 und 818

Eine generelle Problemumgehung wird vorgeschlagen:

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

Natürlich muss $ state zu $ ​​scope hinzugefügt werden. Siehe aktualisierter Plunk: http://plnkr.co/edit/KHLDJP?p=preview

60
Chris T

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

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

5
Kenneth Lynne

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;
4
Ian Walter

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

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"
            }
        }
    });
2
Yang Zhang

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"
})
1
davidwillianx

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.

1
BeingSuman

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.

0
user6664928