Angular-ui-router: stany ui-sref-aktywne i zagnieżdżone


82

angular-ui-routerW mojej aplikacji używam stanów zagnieżdżonych i mam również pasek nawigacyjny. Pasek nawigacji jest napisany odręcznie i służy ui-sref-activedo podświetlania bieżącego stanu. Jest to dwupoziomowy pasek nawigacyjny.

Teraz, kiedy jestem, powiedz, że Products / Categorieschcę, aby zarówno Products(na poziomie 1), jak i Categories(na poziomie 2) były podświetlone. Jednak użycie ui-sref-active, jeśli jestem w stanie, Products.Categoriesto tylko ten stan jest podświetlony, a nie Products.

Czy jest jakiś sposób na Productspodkreślenie tego stanu?

Odpowiedzi:


139

Zamiast tego-

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

Możesz to zrobić-

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

Obecnie to nie działa. Trwa tutaj dyskusja ( https://github.com/angular-ui/ui-router/pull/927 ) I wkrótce zostanie dodana.

AKTUALIZACJA:

Aby to zadziałało, $statepowinien być dostępny w widoku.

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

Więcej informacji

AKTUALIZACJA [2]:

Od wersji 0.2.11działa po wyjęciu z pudełka. Sprawdź powiązany problem: https://github.com/angular-ui/ui-router/issues/818


1
Czy udostępniliście $statekonkretny zakres, taki jak ten $rootScope.$state = $state?
JacobF

1
@jvannistelrooy Yes. Zwykle nic nie wkładam, $rootScopeale ten jest wyjątkiem.
Rifat

2
Dziękuję za opublikowanie tej odpowiedzi. Działał idealnie na mój użytek. Skończyło się na tym, że zmapowałem metodę include na scope ( $scope.includes = $state.includes) mojego kontrolera, zamiast dołączać całość $state.
Richleland

31

Oto opcja dla zagnieżdżania wielu stanów, które nie są hierarchicznie powiązane i nie masz kontrolera dostępnego dla widoku. Możesz użyć filtra UI-Router w zestawie byState, aby porównać swój aktualny stan z dowolną liczbą nazwanych stanów.

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

TL; DR: Wiele, niepowiązanych, nazwanych stanów wymaga zastosowania aktywnej klasy na tym samym łączu i nie masz kontrolera? Użyj includedByState .


Najlepsze rozwiązanie, jeśli tworzysz linki menu, które nie są zgodne z hierarchią State. Również jeśli tworzysz nadrzędny element menu w łączu menu i nie chcesz tworzyć innego Statetylko ze względu na użycie ui-sref-activefunkcji. Uważam, że Statesą przeznaczone do układania HTML, a nie do użycia w linkach menu.
Barun

Działa również w wersji 1.0.0-beta.1, przydatne w przypadku tych linków menu, jak wspomniano powyżej. miałem pasek boczny, który odwołuje się do jednego z 4 stanów potomnych nadrzędnego stanu abstrakcyjnego. Nazywanie tylko części nazwy abstrakcyjnego stanu działa zgodnie z oczekiwaniami podczas przełączania między 4 stanami rodzeństwa.
rccursach

Mógłbyś całą tę logikę umieścić w funkcji :)
Coder

17

Oto rozwiązanie:

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

Edytować:

Powyższe działa tylko dla dokładnej ścieżki trasy i nie zastosuje activeStyle do zagnieżdżonych tras. To rozwiązanie powinno działać w tym przypadku:

<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>

mam cztery linki, do których chcę dodać aktywną klasę, gdy jeden z nich zostanie wybrany, co mam do tego zrobić. @ holland
Jot Dhaliwal

Czy możesz spróbować po prostu dodać data-ng-class="{ active: $state.includes('root.parent') do każdego z linków? Gdzie activejest nazwa klasy.
Holland Risley

Zaoszczędziłem mój czas .. Dziękuję
choz

11

Powiedzmy, że drzewo adresów URL wygląda następująco:

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

użycie:

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

Teraz, po naciśnięciu products: tylko produkty będą aktywne.

jeśli naciśniesz category: zarówno produkty, jak i kategoria będą aktywne.

jeśli chcesz, aby aktywna była tylko kategoria, jeśli ją naciśniesz, powinieneś użyć: ui-sref-active-eqna produktach, co oznacza, że ​​tylko ona będzie aktywna, a nie jej dzieci.

prawidłowe użycie w 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('/');
    });

1
Powinien być oznaczony jako poprawna odpowiedź! Dziękuję, ui-sref-active-eqdziała idealnie!
Maxime Lafarie

2

Tak prosty, krok 1: dodaj kontroler do paska nawigacyjnego lub do istniejącego kontrolera, w którym znajduje się pasek nawigacyjny, dodaj następujące elementy

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
        $scope.isActive = function(destination) {
        return destination === $location.path();
    }

}]);

Krok 2: Na pasku nawigacyjnym

<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>

Otóż ​​to.


0

Router interfejsu użytkownika . Fragment kodu, aby aktywować pasek nawigacyjny.

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

Wewnątrz kursu courseView.HTML

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

Ten przycisk jest obecny w widoku kursu, który prowadzi do następnego widoku, np. Bloga. i sprawia, że ​​pasek nawigacji jest podświetlony.

znajdź podobny przykład, demonstracyjną aplikację kątową ui-routera: https://github.com/vineetsagar7/Angualr-UI-Router


0

Mój kod przeszedł z / productGroups do / productPartitions, co jest jedynym sposobem uzyskania dostępu do widoku „productPartitions”.

Więc dodałem ukrytą kotwicę z ui-sref również ustawioną na „productPartitions” w ramach tej samej pozycji listy, która ma ui-sref-active

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

Teraz przycisk nawigacji ProductGroups pozostaje aktywny podczas uzyskiwania dostępu do dowolnego widoku


0

Tutaj, co zrobiłem, aby osiągnąć to samo. Stan nadrzędny to „app.message” i nie deklaruj go jako abstrakcyjnego.

Stany podrzędne to „app.message.draft”, „app.message.all”, „app.message.sent”.

Moje łącze nawigacyjne -

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

Zdefiniuj trasy / linki dla swoich dzieci.

i zaktualizuj w konfiguracji

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
                if (toState.name === 'app.message') {
                    event.preventDefault();
                    $state.go('app.message.draft');
                    return;
                }
            });
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.