Wie setze ich bootstrap navbar active class mit Angular JS?
Wenn ich eine Navigationsleiste in bootstrap mit den Gegenständen habe
Home | About | Contact
Wie stelle ich die aktive Klasse für jeden Menüpunkt ein, wenn sie aktiv sind? Das heißt, wie kann ich class="active" einstellen, wenn sich die angular Route auf befindet
#/für zu Hause#/aboutfür die About-Seite#/contactfür die Kontaktseite
Eine sehr elegante Möglichkeit ist die Verwendung von ng-controller, um einen einzelnen Controller außerhalb der ng-view auszuführen:
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
<li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
<li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>
und in controller.js einbinden:
function HeaderController($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}
Ich habe gerade eine Direktive geschrieben, um dies zu handhaben, sodass Sie einfach das Attribut bs-active-link zum übergeordneten <ul> -Element hinzufügen können. Jedes Mal, wenn sich die Route ändert, wird der entsprechende Link gefunden und das active Klasse zum entsprechenden <li>.
Sie können es hier in Aktion sehen: http://jsfiddle.net/8mcedv3b/
Beispiel HTML:
<ul class="nav navbar-nav" bs-active-link>
<li><a href="/home">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
Javascript:
angular.module('appName')
.directive('bsActiveLink', ['$location', function ($location) {
return {
restrict: 'A', //use as attribute
replace: false,
link: function (scope, elem) {
//after the route has changed
scope.$on("$routeChangeSuccess", function () {
var hrefs = ['/#' + $location.path(),
'#' + $location.path(), //html5: false
$location.path()]; //html5: true
angular.forEach(elem.find('a'), function (a) {
a = angular.element(a);
if (-1 !== hrefs.indexOf(a.attr('href'))) {
a.parent().addClass('active');
} else {
a.parent().removeClass('active');
};
});
});
}
}
}]);
Sie können sich AngularStrap ansehen, die navbar-Direktive scheint genau das zu sein, wonach Sie suchen:
https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js
.directive('bsNavbar', function($location) {
'use strict';
return {
restrict: 'A',
link: function postLink(scope, element, attrs, controller) {
// Watch for the $location
scope.$watch(function() {
return $location.path();
}, function(newValue, oldValue) {
$('li[data-match-route]', element).each(function(k, li) {
var $li = angular.element(li),
// data('match-rout') does not work with dynamic attributes
pattern = $li.attr('data-match-route'),
regexp = new RegExp('^' + pattern + '$', ['i']);
if(regexp.test(newValue)) {
$li.addClass('active');
} else {
$li.removeClass('active');
}
});
});
}
};
});
So verwenden Sie diese Anweisung:
Laden Sie AngularStrap von http://mgcrea.github.io/angular-strap/ herunter
Fügen Sie das Skript nach bootstrap.js in Ihre Seite ein:
<script src="lib/angular-strap.js"></script>Fügen Sie die Anweisungen zu Ihrem Modul hinzu:
angular.module('myApp', ['$strap.directives'])Fügen Sie die Direktive zu Ihrer Navigationsleiste hinzu:
<div class="navbar" bs-navbar>Fügen Sie jedem Navigationselement reguläre Ausdrücke hinzu:
<li data-match-route="/about"><a href="#/about">About</a></li>
Hier ist ein einfacher Ansatz, der mit Angular gut funktioniert.
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
In Ihrem AngularJS-Controller:
$scope.isActive = function (viewLocation) {
var active = (viewLocation === $location.path());
return active;
};
Wenn Sie mit Angular -Routern arbeiten, kann die RouterLinkActive-Direktive sehr elegant verwendet werden:
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="gallery" routerLinkActive="active">Gallery</a></li>
<li class="nav-item"><a class="nav-link" routerLink="pricing" routerLinkActive="active">Prices</a></li>
<li class="nav-item"><a class="nav-link" routerLink="contact" routerLinkActive="active">Contact</a></li>
</ul>
In erster Linie kann dieses Problem auf viele Arten gelöst werden. Dieser Weg ist vielleicht nicht der eleganteste, aber er funktioniert einwandfrei.
Hier ist eine einfache Lösung, die Sie zu jedem Projekt hinzufügen können sollten. Sie können einfach einen "pageKey" oder eine andere Eigenschaft hinzufügen, wenn Sie Ihre Route konfigurieren, die Sie zum Abschlüsseln verwenden können. Darüber hinaus können Sie einen Listener für die $ routeChangeSuccess-Methode des $ route-Objekts implementieren, um auf den erfolgreichen Abschluss einer Routenänderung zu warten.
Wenn Ihr Handler ausgelöst wird, rufen Sie den Seitenschlüssel ab und verwenden diesen Schlüssel, um Elemente zu suchen, die für diese Seite "ACTIVE" sein müssen. Anschließend wenden Sie die ACTIVE-Klasse an.
Denken Sie daran, dass Sie eine Möglichkeit benötigen, ALLE Elemente "IN ACTIVE" zu machen. Wie Sie sehen, verwende ich die .pageKey-Klasse für meine Navigationselemente, um sie alle auszuschalten, und ich verwende die .pageKey_ {PAGEKEY}, um sie einzeln einzuschalten. Wenn Sie alle auf inaktiv setzen, wird dies als naiver Ansatz angesehen. Möglicherweise erzielen Sie eine bessere Leistung, wenn Sie die vorherige Route verwenden, um nur aktive Elemente inaktiv zu setzen, oder wenn Sie den JQuery-Selektor so ändern, dass nur aktive Elemente ausgewählt werden, die inaktiv gesetzt werden sollen. Die Verwendung von jquery zur Auswahl aller aktiven Elemente ist wahrscheinlich die beste Lösung, da hierdurch sichergestellt wird, dass bei CSS-Fehlern, die möglicherweise auf der vorherigen Route aufgetreten sind, alles für die aktuelle Route bereinigt wird.
Was bedeuten würde, diese Codezeile zu ändern:
$(".pagekey").toggleClass("active", false);
zu diesem
$(".active").toggleClass("active", false);
Hier ist ein Beispielcode:
Bei einer bootstrap Navigationsleiste von
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li>
<li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
<li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
<li><a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li>
</ul>
</div>
</div>
Und ein angular -Modul und eine Steuerung wie die folgende:
<script type="text/javascript">
function Ctrl($scope, $http, $routeParams, $location, $route) {
}
angular.module('BookingFormBuilder', []).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
template: 'I\'m on the home page',
controller: Ctrl,
pageKey: 'HOME' }).
when('/page1/create', {
template: 'I\'m on page 1 create',
controller: Ctrl,
pageKey: 'CREATE' }).
when('/page1/edit/:id', {
template: 'I\'m on page 1 edit {id}',
controller: Ctrl, pageKey: 'EDIT' }).
when('/page1/published/:id', {
template: 'I\'m on page 1 publish {id}',
controller: Ctrl, pageKey: 'PUBLISH' }).
otherwise({ redirectTo: '/' });
$locationProvider.hashPrefix("!");
}).run(function ($rootScope, $http, $route) {
$rootScope.$on("$routeChangeSuccess",
function (angularEvent,
currentRoute,
previousRoute) {
var pageKey = currentRoute.pageKey;
$(".pagekey").toggleClass("active", false);
$(".pagekey_" + pageKey).toggleClass("active", true);
});
});
</script>
Sie können tatsächlich die Anweisung angle-ui-utils 'ui-route verwenden:
<a ui-route ng-href="/">Home</a>
<a ui-route ng-href="/about">About</a>
<a ui-route ng-href="/contact">Contact</a>
oder:
Header-Controller
/**
* Header controller
*/
angular.module('myApp')
.controller('HeaderCtrl', function ($scope) {
$scope.menuItems = [
{
name: 'Home',
url: '/',
title: 'Go to homepage.'
},
{
name: 'About',
url: '/about',
title: 'Learn about the project.'
},
{
name: 'Contact',
url: '/contact',
title: 'Contact us.'
}
];
});
Indexseite
<!-- index.html: -->
<div class="header" ng-controller="HeaderCtrl">
<ul class="nav navbar-nav navbar-right">
<li ui-route="{{menuItem.url}}" ng-class="{active: $uiRoute}"
ng-repeat="menuItem in menuItems">
<a ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
{{menuItem.name}}
</a>
</li>
</ul>
</div>
Wenn Sie ui-utils verwenden, interessieren Sie sich möglicherweise auch für ui-router zum Verwalten von partiellen/verschachtelten Ansichten.
Ich finde all diese Antworten für mich etwas zu kompliziert, sorry. Deshalb habe ich eine kleine Direktive erstellt, die pro Navbar funktionieren sollte:
app.directive('activeLink', function () {
return {
link: function (scope, element, attrs) {
element.find('.nav a').on('click', function () {
angular.element(this)
.parent().siblings('.active')
.removeClass('active');
angular.element(this)
.parent()
.addClass('active');
});
}
};
});
Verwendungszweck:
<ul class="nav navbar-nav navbar-right" active-link>
<li class="nav active"><a href="home">Home</a></li>
<li class="nav"><a href="foo">Foo</a></li>
<li class="nav"><a href="bar">Bar</a></li>
</ul>
Ich benutze die Direktive ng-class mit $ location, um dies zu erreichen.
<ul class="nav">
<li data-ng-class="{active: ($location.path() == '/') }">
<a href="#/">Carpeta Amarilla</a>
</li>
<li class="dropdown" data-ng-class="{active: ($location.path() == '/auditoria' || $location.path() == '/auditoria/todos') }">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Auditoria
<b class="caret"></b>
</a>
<ul class="dropdown-menu pull-right">
<li data-ng-class="{active: ($location.path() == '/auditoria') }">
<a href="#/auditoria">Por Legajo</a>
</li>
<li data-ng-class="{active: ($location.path() == '/auditoria/todos') }">
<a href="#/auditoria/todos">General</a>
</li>
</ul>
</li>
</ul>
Es erfordert, dass sich die Navigationsleiste in einem Haupt-Controller befindet, der Zugriff auf den $ location-Dienst wie folgt hat:
bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location',
function MenuCntl($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}]);
Wenn Sie i-router verwenden, sollte das folgende Beispiel Ihren Anforderungen entsprechen, basierend auf dem Kommentar von @ DanPantry zur akzeptierten Antwort, ohne dass ein controller-seitiger Code hinzugefügt wird:
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="app.home()" href="/">Home</a></li>
<li ui-sref-active="active"><a ui-sref="app.dogs()" href="/dogs">Dogs</a></li>
<li ui-sref-active="active"><a ui-sref="app.cats()" href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>
Sie können das docs überprüfen, um weitere Informationen zu erhalten.
Sie können dies mit einer Bedingung in einem angular Ausdruck erreichen, wie zum Beispiel:
<a href="#" class="{{ condition ? 'active' : '' }}">link</a>
Abgesehen davon finde ich eine angular -Anweisung die "richtigere" Art, dies zu tun, obwohl das Auslagern vieler dieser Mini-Logik Ihre Codebasis etwas verschmutzen kann.
Ich verwende gelegentlich Bedingungen für das GUI-Styling während der Entwicklung, da dies etwas schneller ist als das Erstellen von Direktiven. Ich konnte Ihnen jedoch nicht sagen, in welchem Fall sie tatsächlich lange in der Codebasis verblieben sind. Am Ende verwandle ich es entweder in eine Richtlinie oder finde einen besseren Weg, um das Problem zu lösen.
Wenn Sie lieber nicht AngularStrap verwenden möchten, sollte diese Anweisung den Trick machen !. Dies ist eine Änderung von https://stackoverflow.com/a/16231859/910764 .
JavaScript
angular.module('myApp').directive('bsNavbar', ['$location', function ($location) {
return {
restrict: 'A',
link: function postLink(scope, element) {
scope.$watch(function () {
return $location.path();
}, function (path) {
angular.forEach(element.children(), (function (li) {
var $li = angular.element(li),
regex = new RegExp('^' + $li.attr('data-match-route') + '$', 'i'),
isActive = regex.test(path);
$li.toggleClass('active', isActive);
}));
});
}
};
}]);
HTML
<ul class="nav navbar-nav" bs-navbar>
<li data-match-route="/home"><a href="#/home">Home</a></li>
<li data-match-route="/about"><a href="#/about">About</a></li>
</ul>
Hinweis: Die obigen HTML-Klassen setzen voraus, dass Sie Bootstrap 3.x verwenden
Hier ist meine Meinung dazu. Eine kleine Kombination von Antworten, die in diesem Beitrag gefunden wurden. Ich hatte einen etwas anderen Fall, daher bestand meine Lösung darin, das Menü in eine eigene Vorlage zu unterteilen, die in der Direktive Definition Ojbect verwendet werden soll, und dann meine Navigationsleiste zu der Seite hinzuzufügen, auf der ich es benötigte. Grundsätzlich hatte ich eine Anmeldeseite, auf der ich mein Menü nicht einfügen wollte, also habe ich ngInclude verwendet und diese Direktive eingefügt, wenn ich angemeldet war:
RICHTLINIE:
module.directive('compModal', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: true,
templateUrl: 'templates/menu.html',
controller: function($scope, $element, $location){
$scope.isActive = function(viewLocation){
var active = false;
if(viewLocation === $location.path()){
active = true;
}
return active;
}
}
}
});
RICHTLINIENVORLAGE (templates/menu.html)
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
HTML, DAS DIE RICHTLINIE ENTHÄLT
<comp-navbar/>
Hoffe das hilft
Um meine Antwort zu erweitern, brauchte ich dies, um mit einer Struktur wie dieser fertig zu werden.
-Index
-Ereignisse <-aktiv
---Veranstaltungsliste
--- Event bearbeiten
--- Event-Map <angeklickt
-setzt
--- Ortsliste
--- Ort bearbeiten
--- Ortskarte
also musste ich anstelle von "match" "indexOf" verwenden, um untergeordnete Links zu validieren, die so formatiert sind, dass sie der Bedingung entsprechen. Also für 'Ereignisse':
<li ng-class="{ active: isActive('/event')}" class="divider-vertical dropdown">
function NavController($scope, $location) {
$scope.isActive = function (viewLocation) {
var s=false;
if($location.path().indexOf(viewLocation) != -1){
s = true;
}
return s;
};}
Dies ist eine einfache Lösung
<ul class="nav navbar-nav navbar-right navbar-default menu">
<li ng-class="menuIndice == 1 ? 'active':''">
<a ng-click="menuIndice = 1" href="#/item1">item1</a>
</li>
<li ng-class="menuIndice == 2 ? 'active':''">
<a ng-click="menuIndice = 2" href="#/item2">item2</a>
</li>
<li ng-class="menuIndice == 3 ? 'active':''">
<a ng-click="menuIndice = 3" href="#/item3">item3</a>
</li>
</ul>
Vielen Dank an @ Pylinux . Ich habe seine Technik verwendet und sie auch modifiziert, um "eine" Ebene des Dropdown-Menüs (sub ul/li) zu unterstützen, da dies das ist, was ich brauchte. Sehen Sie es in Aktion in der Geige Link unten.
Aktualisiert Fiddle basierend auf der Antwort von pylinux - http://jsfiddle.net/abhatia/en4qxw6g/
Ich habe die folgenden drei Änderungen vorgenommen, um ein Dropdown-Menü mit einer Ebene zu unterstützen:
1. Es wurde ein Klassenwert von dd (Dropdown) für "a" -Element unter li hinzugefügt, für das eine Subul-Liste erforderlich ist.
<li><a class="dd">This link points to #/fun5</a>
<ul>
<li><a href="#/fun6?some=data">This link points to #/fun6</a>
</li>
<li><a href="#/fun7?some=data">This link points to #/fun7</a>
</li>
<li><a href="#/fun8?some=data">This link points to #/fun8</a>
</li>
<li><a href="#/fun9?some=data">This link points to #/fun9</a>
</li>
</ul>
</li>
2. Aktualisiertes Javascript, um die folgende neue Logik hinzuzufügen.
if(angular.element(li).parent().parent().children('a').hasClass("dd"))
{angular.element(li).parent().parent().children('a.dd').addClass('active');}
3. Aktualisiertes CSS, um Folgendes hinzuzufügen:
a.active {background-color:red;}
Hoffentlich ist dies hilfreich für jemanden, der ein einstufiges Dropdown-Menü implementieren möchte.
In Verbindung mit der AngularStrap-Antwort von @ Olivier habe ich auch die Antwort von kevinknelson implementiert: https://github.com/twbs/bootstrap/issues/901 .
Ursprünglich war die Bootstrap3-Navigationsleiste nicht für eine Anwendung mit nur einer Seite (z. B. Angular) konzipiert, und daher wurde das Menü auf einem kleinen Bildschirm beim Klicken nicht ausgeblendet.
JavaScript
/**
* Main AngularJS Web Application
*/
var app = angular.module('yourWebApp', [
'ngRoute'
]);
/**
* Setup Main Menu
*/
app.controller('MainNavCtrl', [ '$scope', '$location', function ( $scope, $location) {
$scope.menuItems = [
{
name: 'Home',
url: '/home',
title: 'Welcome to our Website'
},
{
name: 'ABOUT',
url: '/about',
title: 'Know about our work culture'
},
{
name: 'CONTACT',
url: '/contact',
title: 'Get in touch with us'
}
];
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}]);
HTML
<div class="navbar-collapse collapse" ng-controller="MainNavCtrl">
<ul id="add-magic-line" class="nav navbar-nav navbar-right">
<li data-ng-class="{current_page_item: isActive('{{ menuItem.url }}')}" data-ng-repeat="menuItem in menuItems">
<a data-ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
{{menuItem.name}}
</a>
</li>
</ul>
</div>
Verwenden Sie ein Objekt als Schaltvariable.
Sie können dies ganz einfach inline tun mit:
<ul class="nav navbar-nav">
<li ng-class="{'active':switch.linkOne}" ng-click="switch = {linkOne: true}"><a href="/">Link One</a></li>
<li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"><a href="/link-two">Link Two</a></li>
</ul>
Jedes Mal, wenn Sie auf einen Link klicken, wird das Switch-Objekt durch ein neues Objekt ersetzt, bei dem nur die richtige Switch-Objekteigenschaft wahr ist. Die undefinierten Eigenschaften werden als falsch ausgewertet, sodass den von ihnen abhängigen Elementen nicht die aktive Klasse zugewiesen wird.
Das hat den Trick für mich getan:
var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
var domain_index = window.location.href.indexOf(domain);
var long_app_name = window.location.href.slice(domain_index+domain.length+1);
// this turns http://www.example.com/whatever/whatever to whatever/whatever
app_name = long_app_name.slice(0, long_app_name.indexOf('/'));
//now you are left off with just the first whatever which is usually your app name
dann verwenden Sie jquery (funktioniert auch mit angular), um eine aktive Klasse hinzuzufügen
$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');
und natürlich das CSS:
.active{background:red;}
dies funktioniert, wenn Sie Ihre HTML wie folgt haben:
<ul><li><a href="/ee">ee</a></li><li><a href="/dd">dd</a></li></ul>
dies fügt automatisch eine Klasse hinzu, die unter Verwendung der Seiten-URL aktiv ist, und färbt Ihren Hintergrund rot, wenn Ihre App auf www.somesite.com/ee die 'App' ist und sie aktiv ist
Dies ist lange beantwortet, aber ich dachte, ich würde meinen Weg teilen:
.run(function($rootScope, $state){
$rootScope.$state = $state;
});
Vorlage:
<ul class="nav navbar-nav">
<li ng-class="{ active: $state.contains('View1') }"><a href="...">View 1</a></li>
<li ng-class="{ active: $state.contains('View2') }"><a href="...">View 2</a></li>
<li ng-class="{ active: $state.contains('View3') }"><a href="...">View 3</a></li>
</ul>
Für diejenigen, die ui-router verwenden:
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a href="...">View 1</a></li>
<li ui-sref-active="active"><a href="...">View 2</a></li>
<li ui-sref-active="active"><a href="...">View 3</a></li>
</ul>
Für eine genaue Übereinstimmung (z. B. verschachtelte Zustände?) Verwenden Sie $state.name === 'full/path/to/state' oder ui-sref-active-eq="active"
Um meine zwei Cent in die Debatte einzubeziehen, habe ich ein reines angular Modul erstellt (keine Abfrage), und es wird auch mit Hash-URLs funktionieren, die Daten enthalten. ( z. B.#/this/is/path?this=is&some=data)
Sie fügen das Modul einfach als Abhängigkeit und auto-active zu einem der Vorfahren des Menüs hinzu. So was:
<ul auto-active>
<li><a href="#/">main</a></li>
<li><a href="#/first">first</a></li>
<li><a href="#/second">second</a></li>
<li><a href="#/third">third</a></li>
</ul>
Und das Modul sieht so aus:
(function () {
angular.module('autoActive', [])
.directive('autoActive', ['$location', function ($location) {
return {
restrict: 'A',
scope: false,
link: function (scope, element) {
function setActive() {
var path = $location.path();
if (path) {
angular.forEach(element.find('li'), function (li) {
var anchor = li.querySelector('a');
if (anchor.href.match('#' + path + '(?=\\?|$)')) {
angular.element(li).addClass('active');
} else {
angular.element(li).removeClass('active');
}
});
}
}
setActive();
scope.$on('$locationChangeSuccess', setActive);
}
}
}]);
}());
* (Sie können natürlich auch nur den Direktiventeil verwenden)
** Es ist auch zu beachten, dass dies nicht für leere Hashes funktioniert ( igexample.com/# oder nur example.com), es muss mindestens example.com/#/ oder nur _ sein example.com#/. Dies geschieht jedoch automatisch mit ngResource und dergleichen.
- Hier ist die Geige: http://jsfiddle.net/gy2an/8/
- Hier ist der Github: https://github.com/Karl-Gustav/autoActive
- Hier ist meine ursprüngliche Antwort: https://stackoverflow.com/a/22282124/146564
Hier ist eine andere Lösung für alle, die interessiert sein könnten. Dies hat den Vorteil, dass es weniger Abhängigkeiten gibt. Heck, es funktioniert auch ohne einen Webserver. Es ist also komplett clientseitig.
HTML:
<nav class="navbar navbar-inverse" ng-controller="topNavBarCtrl"">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
</div>
<ul class="nav navbar-nav">
<li ng-click="selectTab()" ng-class="getTabClass()"><a href="#">Home</a></li>
<li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"><a href="#">{{ tab }}</a></li>
</ul>
</div>
Erläuterung:
Hier generieren wir die Links dynamisch aus einem AngularJS-Modell mit der Direktive ng-repeat. Magie geschieht mit den Methoden selectTab() und getTabClass(), die im Controller für diese unten dargestellte Navigationsleiste definiert sind.
Regler:
angular.module("app.NavigationControllersModule", [])
// Constant named 'activeTab' holding the value 'active'. We will use this to set the class name of the <li> element that is selected.
.constant("activeTab", "active")
.controller("topNavBarCtrl", function($scope, activeTab){
// Model used for the ng-repeat directive in the template.
$scope.tabs = ["Page 1", "Page 2", "Page 3"];
var selectedTab = null;
// Sets the selectedTab.
$scope.selectTab = function(newTab){
selectedTab = newTab;
};
// Sets class of the selectedTab to 'active'.
$scope.getTabClass = function(tab){
return selectedTab == tab ? activeTab : "";
};
});
Erläuterung:
Die Methode selectTab() wird mit der Direktive ng-click aufgerufen. Wenn also auf den Link geklickt wird, wird die Variable selectedTab auf den Namen dieses Links gesetzt. Im HTML-Code können Sie sehen, dass diese Methode ohne Argument für die Registerkarte "Startseite" aufgerufen wird, sodass sie beim Laden der Seite hervorgehoben wird.
Die Methode getTabClass() wird über die Direktive ng-class im HTML aufgerufen. Diese Methode prüft, ob die Registerkarte, in der sie sich befindet, mit dem Wert der Variablen selectedTab übereinstimmt. Wenn true, wird "active" zurückgegeben, andernfalls wird "" zurückgegeben, was von der Anweisung ng-class als Klassenname angewendet wird. Dann wird das CSS, das Sie auf die Klasse active angewendet haben, auf die ausgewählte Registerkarte angewendet.
Ich schlage vor, eine Direktive für einen Link zu verwenden. hier ist die Geige.
Aber es ist noch nicht perfekt. Pass auf die Hashbangs auf;)
Hier ist das Javascript für Direktive:
angular.module('link', []).
directive('activeLink', ['$location', function(location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var clazz = attrs.activeLink;
var path = attrs.href;
path = path.substring(1); //hack because path does not return including hashbang
scope.location = location;
scope.$watch('location.path()', function(newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
und hier ist, wie es in HTML verwendet werden würde:
<div ng-app="link">
<a href="#/one" active-link="active">One</a>
<a href="#/two" active-link="active">One</a>
<a href="#" active-link="active">home</a>
</div>
danach styling mit css:
.active{ color:red; }
Sie müssen lediglich die erforderliche Klasse active mit dem erforderlichen Farbcode hinzufügen.
Beispiel: ng-class="{'active': currentNavSelected}" ng-click="setNav"
Sie können auch diese Active-Link-Direktive verwenden https://stackoverflow.com/a/23138152/138716
Die übergeordnete Klasse wird aktiv, wenn der Ort mit /url übereinstimmt:
<li>
<a href="#!/url" active-link active-link-parent>
</li>