Angular-ui-router: ui-sref-aktiv und geschachtelt

Dies ist eine Option, wenn Sie mehrere Zustände verschachteln, die nicht hierarchisch miteinander verbunden sind, und für die Ansicht kein Controller verfügbar ist. Sie können den UI-Router-Filter includedByState verwenden, um Ihren aktuellen Status gegen eine beliebige Anzahl benannter Status zu prüfen.

<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 zusammenhängende, benannte Zustände müssen eine aktive Klasse auf dieselbe Verbindung anwenden, und Sie haben keinen Controller? Verwenden Sie includedByState .

Dies 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 sieht wie folgt aus:

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, werden nur die Produkte aktiv.

wenn Sie auf category drücken, sind sowohl Produkte als auch Kategorien aktiv.

wenn Sie möchten, dass nur die Kategorie aktiv ist, wenn Sie darauf drücken, sollten Sie Folgendes verwenden: ui-sref-active-eq auf den Produkten, was bedeutet, dass nur sie aktiv sind und nicht ihre Kinder.

die ordnungsgemäße 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 die Navigationsleiste hinzu. Fügen Sie 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 und navigiert Sie zur nächsten Ansicht, d. H. Zum Blog. und hebt Ihre Navigationsleiste hervor.

finden Sie ein ähnliches Beispiel, eine Demo angular 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 auch auf "productPartitions" gesetzt wurde

<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 beim Zugriff auf eine der Ansichten aktiv

Hier, was ich getan habe, um das gleiche zu erreichen. Der übergeordnete Status lautet "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 der Konfigu-

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