webentwicklung-frage-antwort-db.com.de

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

Ich verwende angular-ui-router und verschachtelte Zustände in meiner Anwendung, und ich habe auch eine Navigationsleiste. Die Navigationsleiste ist handgeschrieben und verwendet ui-sref-active, um den aktuellen Status hervorzuheben. Es ist eine zweistufige Navigationsleiste.

Wenn ich jetzt in bin, sagen Sie Products / Categories Ich möchte, dass sowohl Products (in Ebene 1) als auch Categories (in Ebene 2) hervorgehoben werden. Wenn ich jedoch ui-sref-active verwende, bin ich im Zustand Products.Categories, dann wird nur dieser Zustand hervorgehoben, nicht Products.

Gibt es eine Möglichkeit, Products in diesem Status hervorzuheben?

76
paj28

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>

Momentan funktioniert es nicht. Hier findet eine Diskussion statt ( https://github.com/angular-ui/ui-router/pull/927 ). Sie wird demnächst hinzugefügt.

UPDATE:

Damit dies funktioniert, sollte $state in view verfügbar sein.

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

Mehr Info

UPDATE [2]:

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

131
Rifat

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 .

27
Donutself

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>
17
Holland Risley

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

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.

2
user6664928

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

0
vineet sagar

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

0
C Rudolph

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;
                }
            });
0
Aditya Gupta