如果我有一个导航栏与项目引导
Home | About | Contact
如何设置每个菜单项活动类的时候都活跃？ 即，如何设置class="active"时的角路径是在
-
#/家庭 -
#/about对有关网页 -
#/contact的联系人页面
Answer 1:
一个非常优雅的方式是使用NG-控制器到NG-视图之外运行的单个控制器：
<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();
};
}
Answer 2:
我只写了一个指令来处理这个问题，所以你可以简单地添加属性bs-active-link到父<ul>元素，任何时间的路线改变了，它会找到匹配的链接，并添加active类的相应<li>
：您可以在这里的行动看出来http://jsfiddle.net/8mcedv3b/
例如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');
};
});
});
}
}
}]);
Answer 3:
你可以看看AngularStrap ，导航栏指令似乎是你在找什么：
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');
}
});
});
}
};
});
要使用此指令：
从下载AngularStrap http://mgcrea.github.io/angular-strap/
包括bootstrap.js后您的网页上的脚本：
<script src="lib/angular-strap.js"></script>该指令添加到您的模块：
angular.module('myApp', ['$strap.directives'])该指令添加到您的导航栏：
<div class="navbar" bs-navbar>添加正则表达式每个导航项目：
<li data-match-route="/about"><a href="#/about">About</a></li>
Answer 4:
这里是与角行之有效的简单方法。
<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>
在你的AngularJS控制器：
$scope.isActive = function (viewLocation) {
var active = (viewLocation === $location.path());
return active;
};
Answer 5:
如果您正在使用角路由器工作时， RouterLinkActive指令可以真正优雅的使用：
<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>
Answer 6:
首先，这个问题可以在很多方面来解决。 这种方式可能不是最优雅，但它cerntainly工作。
这里有一个简单的解决方案，你应该能够添加到任何项目。 当您配置，您可以使用掉来键入你的路线，你可以只添加一个“pageKey”或其他财产。 此外，还可以实现在$路由对象的$ routeChangeSuccess方法的监听器来监听路由改变的顺利完成。
当您的处理程序触发你的翻页键，并使用该密钥找到需要“活动”这个页面元素，并应用了活动类。
请记住，您需要一种方法来使所有的元素“ACTIVE”。 正如你可以看到我使用我的导航项目.pageKey类将它们全部关闭，而我使用的.pageKey_ {} PAGEKEY单独打开它们。 他们都切换到非活动状态，会被认为是幼稚的做法，有可能你会通过使用以前的路线仅作有效的项目不活动得到更好的性能，或者你可以改变jQuery选择只能选择处于非活动状态活跃项目。 使用jQuery选择所有有效的项目可能是最好的解决方案，因为它确保一切都清理对任何CSS的错误，可能已经存在先前的路线上的情况下，当前的路线。
这将意味着改变这行代码：
$(".pagekey").toggleClass("active", false);
这一个
$(".active").toggleClass("active", false);
下面是一些示例代码：
鉴于自举导航栏的
<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>
和角模块和控制器类似如下：
<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>
Answer 7:
实际上，你可以使用角度-UI-utils的 “ ui-route指示：
<a ui-route ng-href="/">Home</a>
<a ui-route ng-href="/about">About</a>
<a ui-route ng-href="/contact">Contact</a>
要么：
头控制器
/**
* 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.'
}
];
});
索引页
<!-- 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>
如果你使用的UI-utils的，你也可能有兴趣在UI的路由器管理部分/嵌套视图。
Answer 8:
我发现所有这些答案有点过分复杂，我，对不起。 所以，我创建了一个小的指令，应每导航栏基础的工作：
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');
});
}
};
});
用法：
<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>
Answer 9:
我用纳克级的指令与$位置来实现它。
<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>
它需要导航栏是可以访问这样的$位置服务的主控制器内：
bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location',
function MenuCntl($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
}]);
Answer 10:
可以用在角度表达条件，如实现这一点：
<a href="#" class="{{ condition ? 'active' : '' }}">link</a>
话虽这么说，我找到一个角度指令是做的更“正确”的方式，即使外包了不少这样的小逻辑，可以在一定程度污染你的代码库。
我在一段时间发展的过程中使用条件的GUI造型每一次，因为它比创建指令更快一点。 我不能告诉你一个实例中，虽然他们实际留在代码库长。 最后，我要么把它变成一个指令或找到更好的方法来解决这个问题。
Answer 11:
如果你使用的UI路由器 ，下面的例子应该满足基于@ DanPantry对接受的答案评论您的需求，不添加任何控制器端的代码：
<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>
您可以查看文档关于它的详细信息。
Answer 12:
如果您不想使用AngularStrap那么这个指令应该做的伎俩！ 这是的变形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>
注：以上HTML类假设您正在使用引导3.X
Answer 13:
我的继承人采取它。 一点点对这个职位找到答案的组合。 我有一个稍微不同的情况，所以我的解决方案包括分离菜单到它自己的模板被指令定义Ojbect内使用，那么我的导航栏添加到我需要它的页面。 基本上，我有我没有想，包括我的菜单上一个登录页面，所以我用ngInclude和登录时插入此指令：
指示：
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;
}
}
}
});
DIRECTIVE的模板（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，其中包括指令
<comp-navbar/>
希望这可以帮助
Answer 14:
扩展MYL答案，我需要这个来处理这样的结构。
-指数
-events <-active
- -活动列表
---事件编辑
---事件映射<-clicked
-places
---地方列表
---地方编辑
---地方地图
所以不是匹配，我不得不使用的indexOf，以验证其被格式化为符合条件的孩子联系。 因此，对“事件”：
<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;
};}
Answer 15:
这是一个简单的解决方案
<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>
Answer 16:
在与@奥利维尔的AngularStrap答案的同时，我也从实施kevinknelson的回答是： https://github.com/twbs/bootstrap/issues/9013 。
本地，当在小屏幕没有在点击折叠Bootstrap3导航栏没有被设计为单页（如角）应用程序，因此菜单。
Answer 17:
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>
Answer 18:
由于@Pylinux 。 我用他的技术，并修改它来支持“一”下拉菜单（子UL / LI）的水平，因为这是我需要的。 看到它在下面的小提琴链接操作。
更新基于pylinux的答案小提琴- http://jsfiddle.net/abhatia/en4qxw6g/
我做了以下三个转变，以支持一个级别下拉菜单：
1.一种用于其中需要具有亚微升列表的“a”下li元素添加DD（下拉）的类值。
<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.更新JavaScript来添加以下新的逻辑。
if(angular.element(li).parent().parent().children('a').hasClass("dd"))
{angular.element(li).parent().parent().children('a.dd').addClass('active');}
3.更新CSS的添加以下内容：
a.active {background-color:red;}
希望这将有助于找人来实现单级下拉菜单。
Answer 19:
使用对象作为开关变量。
为此，您可以在线很简单有：
<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>
每次点击一个链接时，开关目的是通过一种新的对象，其中只有正确的开关对象属性为true取代。 未定义的属性将评估为假等依赖于它们的元素不会有活动类分配。
Answer 20:
您也可以使用这种主动链接指令https://stackoverflow.com/a/23138152/1387163
家长里将得到积极的类时位置匹配/ URL：
<li>
<a href="#!/url" active-link active-link-parent>
</li>
Answer 21:
我建议使用链路上的指令。 这里是小提琴。
但其尚未完善。 当心hashbangs;）
这里是指令的JavaScript：
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);
}
});
}
};
}]);
这里是如何，将在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>
用CSS样式算账：
.active{ color:red; }
Answer 22:
我想补充我的两分钱在辩论中我做了一个纯粹的角模块（无jQuery的），它也将包含数据散列网址。 （ IG #/this/is/path?this=is&some=data ）
您只需添加模块作为依赖和auto-active到菜单的祖先之一。 像这样：
<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>
并且该模块是这样的：
(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);
}
}
}]);
}());
*（你当然也可以只使用指令的一部分）
**这也是值得注意的是，这并没有对空哈希（工作IG example.com/#或只是example.com ），它需要有至少example.com/#/或只是example.com#/ 。 但是，这与ngResource等的自动发生。
- 这里是小提琴： http://jsfiddle.net/gy2an/8/
- 这里是GitHub的： https://github.com/Karl-Gustav/autoActive
- 这是我原来的答复： https://stackoverflow.com/a/22282124/1465640
Answer 23:
这并获得成功对我来说：
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
然后你使用jquery（有角的作品太）添加类活跃
$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');
当然还有CSS：
.active{background:red;}
这个工作，如果你有你的HTML是这样的：
<ul><li><a href="/ee">ee</a></li><li><a href="/dd">dd</a></li></ul>
这将使用页面URL atumatically添加类活动的，如果你在www.somesite.com/ee thaen EE是“应用”颜色你的背景为红色，这将是积极的
Answer 24:
这是长回答，但我想我会分享我的方式：
.run(function($rootScope, $state){
$rootScope.$state = $state;
});
模板：
<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>
对于使用这些ui-router ：
<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>
针对完全匹配（例如嵌套状态？）使用$state.name === 'full/path/to/state'或ui-sref-active-eq="active"
Answer 25:
这里的人谁可能有兴趣另一种解决方案。 这样做的好处是它有更少的依赖关系。 哎呀，它的工作原理没有一个Web服务器了。 所以这是完全客户端。
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>
说明：
在这里，我们动态地从一个angularjs模型中使用的指令生成的链接ng-repeat 。 魔法发生与方法selectTab()和getTabClass()在控制器此导航栏下面给出定义。
控制器：
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 : "";
};
});
说明：
selectTab()方法是使用所谓的ng-click指令。 所以链接被点击时，变量selectedTab设置这个链接的名称。 在HTML中你可以看到，这个方法被调用，而不用于主页选项卡的任何参数，所以它会在页面加载时突出显示。
所述getTabClass()方法是通过称为ng-class在HTML指令。 此方法检查它是否在选项卡是相同的值selectedTab变量。 如果为真，则返回“活动”否则返回“”这是由类名应用ng-class指令。 那么无论你的CSS已经应用于类active将被应用到所选的选项卡。
Answer 26:
只是你必须添加所需的active与所需的颜色代码-class。
例如： ng-class="{'active': currentNavSelected}" ng-click="setNav"
文章来源: How to set bootstrap navbar active class with Angular JS?
