Angular-UI-Router: UI-Sref-aktive und verschachtelte Zustände

82

Ich verwende angular-ui-routerund verschachtelte Zustände in meiner Anwendung und habe auch eine Navigationsleiste. Die Navigationsleiste ist handgeschrieben und dient ui-sref-activezum Hervorheben des aktuellen Status. Es ist eine zweistufige Navigationsleiste.

Wenn ich jetzt drin Products / Categoriesbin, möchte ich, dass sowohl Products(in Level 1) als auch Categories(in Level 2) hervorgehoben werden. Allerdings verwenden ui-sref-active, wenn ich im Zustand bin Products.Categoriesdann nur dieser Zustand markiert ist , nicht Products.

Gibt es eine Möglichkeit, Productsin diesem Zustand hervorzuheben?

paj28
quelle

Antworten:

138

An Stelle von-

<li ui-sref-active="active">
    <a ui-sref="posts.details">Posts</a>
</li>

Du kannst das-

<li ng-class="{active: $state.includes('posts')}">
    <a ui-sref="posts.details">Posts</a>
</li>

Derzeit funktioniert es nicht. Hier findet eine Diskussion statt ( https://github.com/angular-ui/ui-router/pull/927 ). Diese wird in Kürze hinzugefügt.

AKTUALISIEREN:

Damit dies funktioniert, $statesollte in Sichtweite verfügbar sein.

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);

Mehr Info

UPDATE [2]:

Ab Version 0.2.11funktioniert es sofort. Bitte überprüfen Sie das entsprechende Problem: https://github.com/angular-ui/ui-router/issues/818

Rifat
quelle
1
Haben Sie dies $statespeziell im Umfang verfügbar gemacht $rootScope.$state = $state?
Jvannistelrooy
1
@jvannistelrooy Ja. Normalerweise gebe ich nichts ein, $rootScopeaber dies ist eine Ausnahme.
Rifat
2
Vielen Dank für die Veröffentlichung dieser Antwort. Funktionierte perfekt für meinen Gebrauch. Am Ende habe ich nur die include-Methode auf den scope ( $scope.includes = $state.includes) meines Controllers abgebildet, anstatt das gesamte anzuhängen $state.
Richleland
31

Hier ist eine Option, wenn Sie mehrere Status verschachteln, die nicht hierarchisch miteinander verbunden sind und für die Ansicht kein Controller verfügbar ist. Sie können den UI-Router-Filter inklusive ByState verwenden, um Ihren aktuellen Status mit einer beliebigen Anzahl benannter Status zu vergleichen.

<a ui-sref="production.products" ng-class="{active: ('production.products' | 
includedByState) || ('planning.products' | includedByState) || 
('production.categories' | includedByState) || 
('planning.categories' | includedByState)}">
  Items
</a>

TL; DR: Mehrere, nicht verwandte, benannte Zustände müssen eine aktive Klasse auf denselben Link anwenden, und Sie haben keinen Controller? Verwenden Sie includeByState .

Donutself
quelle
Beste Lösung, wenn Sie Menü-Links erstellen, die nicht der Hierarchie von folgen State. Auch wenn Sie ein übergeordnetes Menüelement in der Menüverknüpfung erstellen und keine weitere erstellen möchten, Statenur um die ui-sref-activeFunktion zu verwenden. Ich glaube, sie Statesind für das Layout von HTML gedacht, nicht für die Verwendung in Menü-Links.
Barun
Funktioniert auch in 1.0.0-beta.1, nützlich für die oben angegebenen Menü-Links. Ich hatte eine Seitenleiste, die sich auf einen von 4 untergeordneten Zuständen eines übergeordneten abstrakten Zustands bezieht. Wenn Sie nur den abstrakten Statusnamen benennen, funktioniert dies erwartungsgemäß, wenn Sie zwischen den 4 Geschwisterzuständen wechseln.
Rccursach
Sie könnten all diese Logik in eine Funktion
einfügen
17

Das ist die Lösung:

<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
     <a ui-sref="project.details">Details</a>
</li>

Bearbeiten:

Das Obige funktioniert nur für den genauen Routenpfad und wendet den activeStyle nicht auf die verschachtelten Routen an. Diese Lösung sollte dafür funktionieren:

<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>
Holland Risley
quelle
Ich habe vier Links, über die ich eine aktive Klasse hinzufügen möchte, wenn einer von ihnen ausgewählt ist, was ich dafür tun muss. @ holland
Jot Dhaliwal
Oder könnten Sie versuchen, einfach data-ng-class="{ active: $state.includes('root.parent') zu jedem der Links hinzuzufügen ? Wo activeist der Klassenname?
Holland Risley
Ich habe meine Zeit gespart. Danke
choz
11

Nehmen wir an, der URL-Baum lautet wie folgt:

app (for home page) -> app.products -> app.products.category

die Verwendung:

<li ui-sref-active="active">
    <a ui-sref="app.products">Products</a>
</li>

Wenn Sie nun auf products: drücken, sind nur die Produkte aktiv.

Wenn Sie auf drücken, sind categorysowohl Produkte als auch Kategorien aktiv.

Wenn Sie möchten, dass nur die Kategorie aktiv ist, wenn Sie darauf drücken, sollten ui-sref-active-eqSie Folgendes verwenden: für die Produkte, was bedeutet, dass nur die Kategorie aktiv ist und nicht die Kinder.

die richtige Verwendung in 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('/');
    });
Edan Chetrit
quelle
1
Sollte als richtige Antwort markiert werden! Danke, ui-sref-active-eqfunktioniert perfekt!
Maxime Lafarie
2

So einfach, Schritt 1: Fügen Sie einen Controller für Ihre Navigationsleiste hinzu oder fügen Sie in Ihrem vorhandenen Controller, in dem 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.


quelle
0

UI-Router . Code-Snippet, um Ihre Navigationsleiste zu aktivieren.

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

Innerhalb von courseView.HTML

<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>

Diese Schaltfläche befindet sich in der Kursansicht, mit der Sie zur nächsten Ansicht, dh zum Blog, navigieren. und macht Ihre Navigationsleiste hervorgehoben.

Finden Sie ein ähnliches Beispiel, eine eckige Demo-UI-Router-App: https://github.com/vineetsagar7/Angualr-UI-Router

Weinstock Sagar
quelle
0

Mein Code navigierte von / productGroups zu / productPartitions. Dies ist die einzige Möglichkeit, auf die Ansicht "productPartitions" zuzugreifen.

Also habe ich einen versteckten Anker hinzugefügt, bei dem ui-sref ebenfalls auf "productPartitions" innerhalb desselben Listenelements gesetzt ist, das ui-sref-active hat

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

Jetzt bleibt die Navigationsschaltfläche productGroups aktiv, wenn Sie auf eine der beiden Ansichten zugreifen

C Rudolph
quelle
0

Hier was ich getan habe um das gleiche zu erreichen. Der übergeordnete Status ist "app.message" und wird nicht als abstrakt deklariert.

Untergeordnete Zustände sind "app.message.draft", "app.message.all", "app.message.sent".

Mein Navigationslink -

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

Definieren Sie die Routen / Links Ihrer Kinder.

und Update in config-

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
                if (toState.name === 'app.message') {
                    event.preventDefault();
                    $state.go('app.message.draft');
                    return;
                }
            });
Aditya Gupta
quelle