У меня есть маршруты, установленные в AngularJS следующим образом:
$routeProvider
.when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController})
.when('/lab', {templateUrl:'partials/lab', controller:widgetsController})
У меня есть ссылки на верхнем баре в стиле табуляции. Как я могу добавить "активный" класс на вкладку в зависимости от текущего шаблона или URL?
Способом решения проблемы без необходимости полагаться на URL-адреса является добавление настраиваемого атрибута для каждого частичного во время конфигурации $routeProvider, например:
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: widgetsController,
activetab: 'dashboard'
}).
when('/lab', {
templateUrl: 'partials/lab.html',
controller: widgetsController,
activetab: 'lab'
});
Откройте $route в контроллере:
function widgetsController($scope, $route) {
$scope.$route = $route;
}
Установите класс active на основе текущей активной вкладки:
<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>
Один из способов сделать это - использовать директиву ngClass и службу определения местоположения $. В шаблоне вы можете:
ng-class="{active:isActive('/dashboard')}"
где isActive будет функцией в области, определенной следующим образом:
myApp.controller('MyCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
Вот полный jsFiddle: http://jsfiddle.net/pkozlowski_opensource/KzAfG/
Повторение ng-class="{active:isActive('/dashboard')}" на каждой вкладке навигации может быть утомительным (если у вас много вкладок), поэтому эта логика может быть кандидатом на очень простую директиву.
Следуя совету Павла, чтобы использовать пользовательскую директиву, здесь версия, которая требует добавления никакой полезной нагрузки для routeConfig, является супер-декларативной и может быть адаптирована для реагирования на любой уровень пути, просто изменяя, какой из них slice() вы обращаете внимание.
app.directive('detectActiveTab', function ($location) {
return {
link: function postLink(scope, element, attrs) {
scope.$on("$routeChangeSuccess", function (event, current, previous) {
/*
Designed for full re-usability at any path, any level, by using
data from attrs. Declare like this:
<li class="nav_tab">
<a href="#/home" detect-active-tab="1">HOME</a>
</li>
*/
// This var grabs the tab-level off the attribute, or defaults to 1
var pathLevel = attrs.detectActiveTab || 1,
// This var finds what the path is at the level specified
pathToCheck = $location.path().split('/')[pathLevel] ||
"current $location.path doesn't reach this level",
// This var finds grabs the same level of the href attribute
tabLink = attrs.href.split('/')[pathLevel] ||
"href doesn't include this level";
// Above, we use the logical 'or' operator to provide a default value
// in cases where 'undefined' would otherwise be returned.
// This prevents cases where undefined===undefined,
// possibly causing multiple tabs to be 'active'.
// now compare the two:
if (pathToCheck === tabLink) {
element.addClass("active");
}
else {
element.removeClass("active");
}
});
}
};
});
Мы достигаем своих целей, слушая событие $routeChangeSuccess, а не размещая $watch на пути. Я тружусь под убеждением, что это означает, что логика должна выполняться реже, поскольку, как я думаю, часы срабатывают каждый цикл $digest.
Вызвать его, передав свой аргумент на уровне пути в объявлении директивы. Это указывает, какой фрагмент текущего $location.path() вы хотите сопоставить с вашим атрибутом href.
<li class="nav_tab"><a href="#/home" detect-active-tab="1">HOME</a></li>
Итак, если ваши вкладки должны реагировать на базовый уровень пути, сделайте аргумент '1'. Таким образом, когда location.path() является "/home", он будет соответствовать "#/home" в href. Если у вас есть вкладки, которые должны реагировать на второй уровень, или третий или одиннадцатый путь, отрегулируйте соответствующим образом. Эта нарезка от 1 или более будет обходить нечестивую "#" в href, которая будет жить с индексом 0.
Единственное требование заключается в том, что вы вызываете на <a>, поскольку этот элемент принимает присутствие атрибута href, который он будет сравнивать с текущим путем. Однако вы можете легко адаптироваться к чтению/записи родительского или дочернего элемента, если вы предпочитаете ссылаться на <li> или что-то еще. Я копаю это, потому что вы можете повторно использовать его во многих контекстах, просто изменяя аргумент pathLevel. Если глубина чтения считалась логикой, вам понадобится несколько версий директивы для использования с несколькими частями навигации.
EDIT 3/18/14: решение было недостаточно обобщено и активировалось, если вы определили arg для значения "activeTab", который вернул undefined как для $location.path(), так и для элемента href. Потому что: undefined === undefined. Обновлено, чтобы исправить это условие.
Во время работы над этим я понял, что должна существовать версия, которую вы можете просто объявить на родительском элементе, с такой структурой шаблона, как это:
<nav id="header_tabs" find-active-tab="1">
<a href="#/home" class="nav_tab">HOME</a>
<a href="#/finance" class="nav_tab">Finance</a>
<a href="#/hr" class="nav_tab">Human Resources</a>
<a href="#/quarterly" class="nav_tab">Quarterly</a>
</nav>
Обратите внимание, что эта версия больше не похожа на HTML в стиле Bootstrap. Но, он более современный и использует меньше элементов, поэтому я неполный к нему. Эта версия директивы, плюс оригинал, теперь доступная на Github в качестве выпадающего модуля, который вы можете просто объявить как зависимость. Я был бы рад Bower-ize им, если кто-то действительно использует их.
Кроме того, если вы хотите иметь совместимую с bootstrap версию, включающую <li>, вы можете перейти с angular -ui-bootstrap Tabs module, который, я думаю, вышел после этого оригинального поста и, возможно, даже более декларативный, чем этот. Это менее кратким для базового материала, но предоставляет вам дополнительные опции, такие как заблокированные вкладки и декларативные события, которые запускаются при активации и деактивации.
@rob-juurlink Я немного улучшил ваше решение:
вместо каждого маршрута, требующего активной вкладки; и мне нужно установить активную вкладку в каждом контроллере, я делаю это:
var App = angular.module('App',[]);
App.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: Ctrl1
}).
when('/lab', {
templateUrl: 'partials/lab.html',
controller: Ctrl2
});
}]).run(['$rootScope', '$location', function($rootScope, $location){
var path = function() { return $location.path();};
$rootScope.$watch(path, function(newVal, oldVal){
$rootScope.activetab = newVal;
});
}]);
И HTML выглядит так. Activetab - это только URL-адрес, относящийся к этому маршруту. Это просто устраняет необходимость добавления кода в каждый контроллер (перетаскивание зависимостей, таких как $route и $rootScope, если это единственная причина, по которой они используются)
<ul>
<li ng-class="{active: activetab=='/dashboard'}">
<a href="#/dashboard">dashboard</a>
</li>
<li ng-class="{active: activetab=='/lab'}">
<a href="#/lab">lab</a>
</li>
</ul>
Возможно, такая директива может решить вашу проблему: http://jsfiddle.net/p3ZMR/4/
HTML
<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>
JS
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 bot return including hashbang
scope.location = location;
scope.$watch('location.path()', function(newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
Самое простое решение здесь:
Как установить загрузочный активный класс navbar с помощью Angular JS?
Что есть:
Используйте ng-controller для запуска одного контроллера вне ng-view:
<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>
и включите в controllers.js:
function HeaderController($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}
Я рекомендую использовать state.ui module, который не только поддерживает множественные и вложенные представления, но и делает эту работу очень простой (код ниже цитируется):
<ul class="nav">
<li ng-class="{ active: $state.includes('contacts') }"><a href="#{{$state.href('contacts')}}">Contacts</a></li>
<li ng-class="{ active: $state.includes('about') }"><a href="#{{$state.href('about')}}">About</a></li>
</ul>
Стоит прочитать.
Здесь другая версия изменения XMLillies w/domi LI, которая использует строку поиска вместо уровня пути. Я думаю, что это немного более очевидно, что происходит для моего случая использования.
statsApp.directive('activeTab', function ($location) {
return {
link: function postLink(scope, element, attrs) {
scope.$on("$routeChangeSuccess", function (event, current, previous) {
if (attrs.href!=undefined) { // this directive is called twice for some reason
// The activeTab attribute should contain a path search string to match on.
// I.e. <li><a href="#/nested/section1/partial" activeTab="/section1">First Partial</a></li>
if ($location.path().indexOf(attrs.activeTab) >= 0) {
element.parent().addClass("active");//parent to get the <li>
} else {
element.parent().removeClass("active");
}
}
});
}
};
});
HTML теперь выглядит так:
<ul class="nav nav-tabs">
<li><a href="#/news" active-tab="/news">News</a></li>
<li><a href="#/some/nested/photos/rawr" active-tab="/photos">Photos</a></li>
<li><a href="#/contact" active-tab="/contact">Contact</a></li>
</ul>
Я нашел XMLilley anwser лучшим и наиболее адаптивным и неинтрузивным.
Однако у меня был небольшой сбой.
Для использования с bootstrap nav, вот как я его модифицировал:
app.directive('activeTab', function ($location) {
return {
link: function postLink(scope, element, attrs) {
scope.$on("$routeChangeSuccess", function (event, current, previous) {
/* designed for full re-usability at any path, any level, by using
data from attrs
declare like this: <li class="nav_tab"><a href="#/home"
active-tab="1">HOME</a></li>
*/
if(attrs.href!=undefined){// this directive is called twice for some reason
// this var grabs the tab-level off the attribute, or defaults to 1
var pathLevel = attrs.activeTab || 1,
// this var finds what the path is at the level specified
pathToCheck = $location.path().split('/')[pathLevel],
// this var finds grabs the same level of the href attribute
tabLink = attrs.href.split('/')[pathLevel];
// now compare the two:
if (pathToCheck === tabLink) {
element.parent().addClass("active");//parent to get the <li>
}
else {
element.parent().removeClass("active");
}
}
});
}
};
});
Я добавил "if (attrs.href!= undefined)", потому что эта функция, вероятно, дваждызывается, второй раз создает ошибку.
Что касается html:
<ul class="nav nav-tabs">
<li class="active" active-tab="1"><a href="#/accueil" active-tab="1">Accueil</a></li>
<li><a active-tab="1" href="#/news">News</a></li>
<li><a active-tab="1" href="#/photos" >Photos</a></li>
<li><a active-tab="1" href="#/contact">Contact</a></li>
</ul>
Пример начальной загрузки.
Если вы используете Angulars, встроенную в маршрутизацию (ngview), эту директиву можно использовать:
angular.module('myApp').directive('classOnActiveLink', [function() {
return {
link: function(scope, element, attrs) {
var anchorLink = element.children()[0].getAttribute('ng-href') || element.children()[0].getAttribute('href');
anchorLink = anchorLink.replace(/^#/, '');
scope.$on("$routeChangeSuccess", function (event, current) {
if (current.$$route.originalPath == anchorLink) {
element.addClass(attrs.classOnActiveLink);
}
else {
element.removeClass(attrs.classOnActiveLink);
}
});
}
};
}]);
Предполагая, что ваша разметка выглядит следующим образом:
<ul class="nav navbar-nav">
<li class-on-active-link="active"><a href="/orders">Orders</a></li>
<li class-on-active-link="active"><a href="/distributors">Distributors</a></li>
</ul>
Мне это нравится, потому что вы можете указать имя класса в своем атрибуте.
Вы также можете просто ввести местоположение в область и использовать это, чтобы вычесть стиль для навигации:
function IndexController( $scope, $rootScope, $location ) {
$rootScope.location = $location;
...
}
Затем используйте его в ng-class:
<li ng-class="{active: location.path() == '/search'}">
<a href="/search">Search><a/>
</li>
альтернативным способом является использование ui-sref-active
Директива, работающая вместе с ui-sref, добавляет классы к элементу, когда соответствующее директивное состояние ui-sref активно и удаляет их, когда оно неактивно. Основным вариантом использования является упрощение особого вида навигационных меню, основанных на ui-sref, путем нажатия кнопки "активного" состояния, отличающегося от неактивных пунктов меню.
Использование:
ui-sref-active = 'class1 class2 class3' - классы "class1", "class2" и "class3" добавляются к элементу директивы, когда соответствующее состояние ui-sref является активным и удаляется, когда оно неактивным.
Пример:
Учитывая следующий шаблон,
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
</li>
<!-- ... -->
</ul>
когда состояние приложения "app.user" и содержит параметр состояния "пользователь" со значением "bilbobaggins", итоговый HTML будет отображаться как
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
</li>
<!-- ... -->
</ul>
Имя класса интерполируется один раз в течение времени ссылки директив (любые дальнейшие изменения интерполированного значения игнорируются). Несколько классов могут быть указаны в формате, разделенном пробелом.
Используйте директиву ui-sref-opts для передачи опций в $state.go(). Пример:
<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
Я согласен с сообщением Роба о наличии пользовательского атрибута в контроллере. По-видимому, у меня недостаточно комментариев для комментариев. Здесь запрошен jsfiddle:
sample html
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="link in links" ng-class="{active: $route.current.activeNav == link.type}"> <a href="{{link.uri}}">{{link.name}}</a>
</li>
</ul>
</div>
sample app.js
angular.module('MyApp', []).config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/a', {
activeNav: 'a'
})
.when('/a/:id', {
activeNav: 'a'
})
.when('/b', {
activeNav: 'b'
})
.when('/c', {
activeNav: 'c'
});
}])
.controller('MyCtrl', function ($scope, $route) {
$scope.$route = $route;
$scope.links = [{
uri: '#/a',
name: 'A',
type: 'a'
}, {
uri: '#/b',
name: 'B',
type: 'b'
}, {
uri: '#/c',
name: 'C',
type: 'c'
}, {
uri: '#/a/detail',
name: 'A Detail',
type: 'a'
}];
});
'use strict';
angular.module('cloudApp')
.controller('MenuController', function ($scope, $location, CloudAuth) {
$scope.menu = [
{
'title': 'Dashboard',
'iconClass': 'fa fa-dashboard',
'link': '/dashboard',
'active': true
},
{
'title': 'Devices',
'iconClass': 'fa fa-star',
'link': '/devices'
},
{
'title': 'Settings',
'iconClass': 'fa fa-gears',
'link': '/settings'
}
];
$location.path('/dashboard');
$scope.isLoggedIn = CloudAuth.isLoggedIn;
$scope.isAdmin = CloudAuth.isAdmin;
$scope.isActive = function(route) {
return route === $location.path();
};
});
И используйте ниже в шаблоне:
<li role="presentation" ng-class="{active:isActive(menuItem.link)}" ng-repeat="menuItem in menu"><a href="{{menuItem.link}}"><i class="{{menuItem.iconClass}}"></i> {{menuItem.title}}</a></li>
Мне понадобилось решение, которое не требует изменений в контроллерах, потому что для некоторых страниц мы обрабатываем только шаблоны и нет контроллера вообще. Благодаря предыдущим комментаторам, которые предложили использовать $routeChangeSuccess, я придумал что-то вроде этого:
# Directive
angular.module('myapp.directives')
.directive 'ActiveTab', ($route) ->
restrict: 'A'
link: (scope, element, attrs) ->
klass = "active"
if $route.current.activeTab? and attrs.flActiveLink is $route.current.activeTab
element.addClass(klass)
scope.$on '$routeChangeSuccess', (event, current) ->
if current.activeTab? and attrs.flActiveLink is current.activeTab
element.addClass(klass)
else
element.removeClass(klass)
# Routing
$routeProvider
.when "/page",
templateUrl: "page.html"
activeTab: "page"
.when "/other_page",
templateUrl: "other_page.html"
controller: "OtherPageCtrl"
activeTab: "other_page"
# View (.jade)
a(ng-href='/page', active-tab='page') Page
a(ng-href='/other_page', active-tab='other_page') Other page
Это не зависит от URL-адресов, и поэтому очень легко настроить его для любых дополнительных страниц и т.д.
Я не могу вспомнить, где я нашел этот метод, но он довольно прост и работает хорошо.
HTML:
<nav role="navigation">
<ul>
<li ui-sref-active="selected" class="inactive"><a ui-sref="tab-01">Tab 01</a></li>
<li ui-sref-active="selected" class="inactive"><a ui-sref="tab-02">Tab 02</a></li>
</ul>
</nav>
CSS
.selected {
background-color: $white;
color: $light-blue;
text-decoration: none;
border-color: $light-grey;
}
Пришел сюда для решения.. хотя выше решения работают нормально, но нашли их немного сложными ненужными. Для людей, которые все еще ищут легкое и аккуратное решение, он отлично справится с задачей.
<section ng-init="tab=1">
<ul class="nav nav-tabs">
<li ng-class="{active: tab == 1}"><a ng-click="tab=1" href="#showitem">View Inventory</a></li>
<li ng-class="{active: tab == 2}"><a ng-click="tab=2" href="#additem">Add new item</a></li>
<li ng-class="{active: tab == 3}"><a ng-click="tab=3" href="#solditem">Sold item</a></li>
</ul>
</section>