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

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?

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

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 .

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>

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

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.

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

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

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