angular-ui-router
W 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-active
do podświetlania bieżącego stanu. Jest to dwupoziomowy pasek nawigacyjny.
Teraz, kiedy jestem, powiedz, że Products / Categories
chcę, 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.Categories
to tylko ten stan jest podświetlony, a nie Products
.
Czy jest jakiś sposób na Products
podkreślenie tego stanu?
źródło
$state
konkretny zakres, taki jak ten$rootScope.$state = $state
?$rootScope
ale ten jest wyjątkiem.$scope.includes = $state.includes
) mojego kontrolera, zamiast dołączać całość$state
.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 .
źródło
State
. Również jeśli tworzysz nadrzędny element menu w łączu menu i nie chcesz tworzyć innegoState
tylko ze względu na użycieui-sref-active
funkcji. Uważam, żeState
są przeznaczone do układania HTML, a nie do użycia w linkach menu.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>
źródło
data-ng-class="{ active: $state.includes('root.parent')
do każdego z linków? Gdzieactive
jest nazwa klasy.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-eq
na 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('/'); });
źródło
ui-sref-active-eq
działa idealnie!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.
źródło
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
źródło
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
źródło
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; } });
źródło