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

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?

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

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 .

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>

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

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.

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

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

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