blocks|key|2810854|text|首先，这个问题可以用很多方法来解决。这种方式可能不是最优雅的，但它肯定是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2810855|这是一个简单的解决方案，您应该能够添加到任何项目中。你可以在配置你的路由时添加一个"pageKey“或者其他一些属性，你可以用它来关闭。此外，您可以在$route对象的$routeChangeSuccess方法上实现侦听程序，以侦听路由更改是否成功完成。|2810856|当您的处理程序触发时，您将获得页面键，并使用该键定位此页面需要“活动”的元素，然后应用活动类。|2810857|请记住，您需要一种方法来使所有元素都是“活动的”。如您所见，我在nav项目上使用.pageKey类将它们全部关闭，并使用.pageKey_{PAGEKEY}单独打开它们。将它们全部切换到非活动状态，将被认为是一种幼稚的方法，如果使用前面的方法只将活动项设为非活动项，则可能会获得更好的性能，或者您可以将jquery选择器更改为只选择要使其处于非活动状态的活动项。使用jquery选择所有活动项可能是最好的解决方案，因为它确保了当前路由的所有内容都被清理干净，以防上一条路由上可能存在的任何css+bug。|2810858|这意味着要修改这行代码：|2810859|$(".pagekey").toggleClass("active",+false);|code-block|syntax|javascript|2810860|到这一个|2810861|$(".active").toggleClass("active",+false);|2810862|下面是一些示例代码：|2810863|给定bootstrap导航栏|2810864|<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>|2810865|以及如下所示的angular模块和控制器：|2810866|<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_"+%2B+pageKey).toggleClass("active",+true);
++++++++++++});

++++++++});

</script>|2810867|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1B|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|L|7|1E|8|@]|9|@]|A|$M|N]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|L|7|1G|8|@]|9|@]|A|$M|N]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

First and foremost, this problem can be solved in a lot of ways. This way might not be the most elegant, but it cerntainly works.

Here is a simple solution you should be able to add to any project. You can just add a "pageKey" or some other property when you configure your route that you can use to key off of. Additionally, you can implement a listener on the $routeChangeSuccess method of the $route object to listen for the successful completion of a route change.

When your handler fires you get the page key, and use that key to locate elements that need to be "ACTIVE" for this page, and you apply the ACTIVE class.

Keep in mind you need a way to make ALL the elements "IN ACTIVE". As you can see i'm using the .pageKey class on my nav items to turn them all off, and I'm using the .pageKey_{PAGEKEY} to individually turn them on. Switching them all to inactive, would be considered a naive approach, potentially you'd get better performance by using the previous route to make only active items inactive, or you could alter the jquery selector to only select active items to be made inactive. Using jquery to select all active items is probably the best solution because it ensures everything is cleaned up for the current route in case of any css bugs that might have been present on the previous route.

Which would mean changing this line of code:

<pre><code>$(".pagekey").toggleClass("active", false);
</code></pre>

to this one

<pre><code>$(".active").toggleClass("active", false);
</code></pre>

Here is some sample code:

Given a bootstrap navbar of

<pre><code>&lt;div class="navbar navbar-inverse"&gt;
 &lt;div class="navbar-inner"&gt;
 &lt;a class="brand" href="#"&gt;Title&lt;/a&gt;
 &lt;ul class="nav"&gt;
 &lt;li&gt;&lt;a href="#!/" class="pagekey pagekey_HOME"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#!/page1/create" class="pagekey pagekey_CREATE"&gt;Page 1 Create&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#!/page1/edit/1" class="pagekey pagekey_EDIT"&gt;Page 1 Edit&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH"&gt;Page 1 Published&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

And an angular module and controller like the following:

<pre><code>&lt;script type="text/javascript"&gt;

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

 });

&lt;/script&gt;
</code></pre>

blocks|key|3023578|text|你可以看看AngularStrap，导航栏指令似乎就是你要找的：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3023579|https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js|3023580|.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('%5E'+%2B+pattern+%2B+'$',+['i']);

++++++++++if(regexp.test(newValue))+{
++++++++++++$li.addClass('active');
++++++++++}+else+{
++++++++++++$li.removeClass('active');
++++++++++}

++++++++});
++++++});
++++}
++};
});|code-block|syntax|javascript|3023581|要使用此指令：|3023582|3023583|Download+AngularStrap+from+http://mgcrea.github.io/angular-strap/+|ordered-list-item|3023584|在bootstrap.js之后将脚本包含在您的页面上：|3023585|3023586|<script+src="lib/angular-strap.js"></script>+|style|CODE|3023587|将指令添加到模块中：|unordered-list-item|3023588|3023589|angular.module('myApp',+['$strap.directives'])+|3023590|将该指令添加到导航栏：|3023591|3023592|<div+class="navbar"+bs-navbar>+|3023593|在每个nav项目上添加正则表达式：|3023594|3023595|<li+data-match-route="/about"><a+href="#/about">About</a></li>|3023596|entityMap|0|LINK|mutability|MUTABLE|url|http://mgcrea.github.io/angular-strap|1|2|http://mgcrea.github.io/angular-strap/^0|5|C|0|0|0|20|1|0|0|0|0|R|12|2|0|0|0|0|18|0|0|0|0|1A|0|0|0|0|U|0|0|0|0|1Q|0^^$0|@$1|2|3|4|5|6|7|1O|8|@]|9|@$A|1P|B|1Q|1|1R]]|C|$]]|$1|D|3|E|5|6|7|1S|8|@]|9|@$A|1T|B|1U|1|1V]]|C|$]]|$1|F|3|G|5|H|7|1W|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1X|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|N|3|O|5|P|7|1Z|8|@]|9|@$A|20|B|21|1|22]]|C|$]]|$1|Q|3|R|5|P|7|23|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|24|8|@]|9|@]|C|$]]|$1|T|3|U|5|6|7|25|8|@$A|26|B|27|V|W]]|9|@]|C|$]]|$1|X|3|Y|5|Z|7|28|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|29|8|@]|9|@]|C|$]]|$1|11|3|12|5|6|7|2A|8|@$A|2B|B|2C|V|W]]|9|@]|C|$]]|$1|13|3|14|5|Z|7|2D|8|@]|9|@]|C|$]]|$1|15|3|-4|5|6|7|2E|8|@]|9|@]|C|$]]|$1|16|3|17|5|6|7|2F|8|@$A|2G|B|2H|V|W]]|9|@]|C|$]]|$1|18|3|19|5|Z|7|2I|8|@]|9|@]|C|$]]|$1|1A|3|-4|5|6|7|2J|8|@]|9|@]|C|$]]|$1|1B|3|1C|5|6|7|2K|8|@$A|2L|B|2M|V|W]]|9|@]|C|$]]|$1|1D|3|-4|5|6|7|2N|8|@]|9|@]|C|$]]]|1E|$1F|$5|1G|1H|1I|C|$1J|1K]]|1L|$5|1G|1H|1I|C|$1J|E]]|1M|$5|1G|1H|1I|C|$1J|1N]]]]

You can have a look at <a href="http://mgcrea.github.io/angular-strap">AngularStrap</a>, the navbar directive seems to be what you are looking for:

<a href="https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js">https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js</a>

<pre><code>.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');
 }

 });
 });
 }
 };
});
</code></pre>

To use this directive:

<ol>
<li>Download AngularStrap from <a href="http://mgcrea.github.io/angular-strap/">http://mgcrea.github.io/angular-strap/</a> </li>
<li>Include the script on your page after bootstrap.js: 
<code>&lt;script src="lib/angular-strap.js"&gt;&lt;/script&gt;</code> </li>
<li>Add the directives to your module: 
<code>angular.module('myApp', ['$strap.directives'])</code> </li>
<li>Add the directive to your navbar: 
<code>&lt;div class="navbar" bs-navbar&gt;</code> </li>
<li>Add regexes on each nav item: 
<code>&lt;li data-match-route="/about"&gt;&lt;a href="#/about"&gt;About&lt;/a&gt;&lt;/li&gt;</code></li>
</ol>

blocks|key|189927|text|您可以在角度表达式中使用条件来实现这一点，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|189928|<a+href="#"+class="{{+condition+?+'active'+:+''+}}">link</a>|code-block|syntax|javascript|189929|话虽如此，我确实发现angular指令是一种更“合适”的方式，尽管外包大量这种小逻辑可能会有点污染您的代码库。|189930|在开发过程中，我偶尔会使用条件来设置GUI样式，因为这比创建指令要快一点。但是，我不能告诉你它们在代码库中保留了很长时间的情况。最后，我要么把它变成一个指令，要么找到一个更好的方法来解决这个问题。|189931|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can achieve this with a conditional in an angular expression, such as:

<pre><code>&lt;a href="#" class="{{ condition ? 'active' : '' }}"&gt;link&lt;/a&gt;
</code></pre>

That being said, I do find an angular directive to be the more "proper" way of doing it, even though outsourcing a lot of this mini-logic can somewhat pollute your code base.

I use conditionals for GUI styling every once in a while during development, because it's a little quicker than creating directives. I couldn't tell you an instance though in which they actually remained in the code base for long. In the end I either turn it into a directive or find a better way to solve the problem.

blocks|key|190308|text|我使用带有$location的ng-class指令来实现它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|190309|<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'+%7C%7C+$location.path()+==+'/auditoria/todos')+}">
++++<a+class="dropdown-toggle"+data-toggle="dropdown"+href="#">
++++++++Auditoria
++++++++<b+class="caret">
++++</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>|code-block|syntax|javascript|190310|它要求导航栏位于能够访问$location服务的主控制器中，如下所示：|190311|bajasApp.controller('MenuCntl',+['$scope','$route',+'$routeParams',+'$location',+
+++function+MenuCntl($scope,+$route,+$routeParams,+$location)+{
+++$scope.$route+=+$route;
+++$scope.$location+=+$location;
+++$scope.$routeParams+=+$routeParams;
}]);|190312|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I use ng-class directive with $location to achieve it.

<pre><code>&lt;ul class="nav"&gt;
&lt;li data-ng-class="{active: ($location.path() == '/') }"&gt;
 &lt;a href="#/"&gt;Carpeta Amarilla&lt;/a&gt;
&lt;/li&gt;
&lt;li class="dropdown" data-ng-class="{active: ($location.path() == '/auditoria' || $location.path() == '/auditoria/todos') }"&gt;
 &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;
 Auditoria
 &lt;b class="caret"&gt;&lt;/b&gt;
 &lt;/a&gt;
 &lt;ul class="dropdown-menu pull-right"&gt;
 &lt;li data-ng-class="{active: ($location.path() == '/auditoria') }"&gt;
 &lt;a href="#/auditoria"&gt;Por Legajo&lt;/a&gt;
 &lt;/li&gt;
 &lt;li data-ng-class="{active: ($location.path() == '/auditoria/todos') }"&gt;
 &lt;a href="#/auditoria/todos"&gt;General&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

It requires the navbar to be inside a main Controller with access to $location service like this:

<pre><code>bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location', 
 function MenuCntl($scope, $route, $routeParams, $location) {
 $scope.$route = $route;
 $scope.$location = $location;
 $scope.$routeParams = $routeParams;
}]);
</code></pre>

blocks|key|192528|text|这里有一个简单的方法，可以很好地使用Angular。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|192529|<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>|code-block|syntax|javascript|192530|在您的AngularJS控制器中：|192531|$scope.isActive+=+function+(viewLocation)+{
+++++var+active+=+(viewLocation+===+$location.path());
+++++return+active;
};|192532|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here's a simple approach that works well with Angular. 

<pre><code>&lt;ul class="nav navbar-nav"&gt;
 &lt;li ng-class="{ active: isActive('/View1') }"&gt;&lt;a href="#/View1"&gt;View 1&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-class="{ active: isActive('/View2') }"&gt;&lt;a href="#/View2"&gt;View 2&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-class="{ active: isActive('/View3') }"&gt;&lt;a href="#/View3"&gt;View 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

Within your AngularJS controller:

<pre><code>$scope.isActive = function (viewLocation) {
 var active = (viewLocation === $location.path());
 return active;
};
</code></pre>

blocks|key|190322|text|一种非常优雅的方式是使用ng-controller在ng-view之外运行单个控制器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|190323|<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>|code-block|syntax|javascript|190324|并包含在controllers.js中：|190325|function+HeaderController($scope,+$location)+
{+
++++$scope.isActive+=+function+(viewLocation)+{+
++++++++return+viewLocation+===+$location.path();
++++};
}|190326|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

A very elegant way is to use ng-controller to run a single controller outside of the ng-view:

<pre><code>&lt;div class="collapse navbar-collapse" ng-controller="HeaderController"&gt;
 &lt;ul class="nav navbar-nav"&gt;
 &lt;li ng-class="{ active: isActive('/')}"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-class="{ active: isActive('/dogs')}"&gt;&lt;a href="/dogs"&gt;Dogs&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-class="{ active: isActive('/cats')}"&gt;&lt;a href="/cats"&gt;Cats&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;div ng-view&gt;&lt;/div&gt;
</code></pre>

and include in controllers.js:

<pre><code>function HeaderController($scope, $location) 
{ 
 $scope.isActive = function (viewLocation) { 
 return viewLocation === $location.path();
 };
}
</code></pre>

blocks|key|3023750|text|扩展myl+answer，我需要它来处理这样的结构。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3023751|-index|3023752|-事件<-活动|3023753|-事件列表|3023754|-事件编辑|3023755|-事件映射<-已单击|3023756|-places|3023757|-位置列表|3023758|-place-edit|3023759|-位置映射|3023760|因此，我不得不使用indexOf来验证子链接的格式以匹配条件，而不是进行匹配。因此，对于“事件”：|3023761|<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;
};}|code-block|syntax|javascript|3023762|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|18|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|19|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1A|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1B|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1C|8|@]|9|@]|A|$]]|$1|V|3|W|5|X|7|1D|8|@]|9|@]|A|$Y|Z]]|$1|10|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|11|$]]

Extending myl answer, I needed this to handle an structure like this.

-index

-events&lt;-active 
---event-list 
---event-edit 
---event-map &lt;-clicked

-places 
---place-list 
---place-edit 
---place-map

so instead of matching, I had to use indexOf, in order to validate children links which are formatted to match the condition. So for 'events':

<pre><code>&lt;li ng-class="{ active: isActive('/event')}" class="divider-vertical dropdown"&gt;


function NavController($scope, $location) { 
$scope.isActive = function (viewLocation) {
 var s=false;
 if($location.path().indexOf(viewLocation) != -1){
 s = true;
 }
 return s;
};}
</code></pre>

blocks|key|3023797|text|结合@Olivier的AngularStrap回答，我还实现了来自https://github.com/twbs/bootstrap/issues/9013的kevinknelson的回答。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3023798|在本地，Bootstrap3导航栏不是为单页面(如Angular)应用程序设计的，因此菜单在小屏幕上时不会在单击时折叠。|3023799|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/issues/9013^0|X|19|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

In conjunction with @Olivier's AngularStrap answer, I also implemented kevinknelson's answer from: <a href="https://github.com/twbs/bootstrap/issues/9013" rel="nofollow">https://github.com/twbs/bootstrap/issues/9013</a>. 

Natively, the Bootstrap3 navbar was not designed for a single-page (eg Angular) application and thus the menu when on a small screen was not collapsing upon click.

blocks|key|2811175|text|我刚刚编写了一个指令来处理这个问题，所以您可以简单地将属性bs-active-link添加到父<ul>元素中，只要路由发生更改，它就会找到匹配的链接，并将active类添加到相应的<li>中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2811176|你可以在这里看到它的实际效果：http://jsfiddle.net/8mcedv3b/|2811177|示例HTML：|2811178|<ul+class="nav+navbar-nav"+bs-active-link>
++<li><a+href="/home">Home</a></li>
++<li><a+href="/contact">Contact</a></li>
</ul>|code-block|syntax|javascript|2811179|Javascript：|2811180|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+=+['/#'+%2B+$location.path(),
+++++++++++++++++++++++++'#'+%2B+$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');+++
++++++++++++++++};
++++++++++++});+++++
++++++++});
++++}
}
}]);|2811181|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/8mcedv3b/^0|T|E|1B|4|25|6|2I|4|0|F|T|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1F|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

I just wrote a directive to handle this, so you can simply add the attribute <code>bs-active-link</code> to the parent <code>&lt;ul&gt;</code> element, and any time the route changed, it will find the matching link, and add the <code>active</code> class to the corresponding <code>&lt;li&gt;</code>. 

You can see it in action here: <a href="http://jsfiddle.net/8mcedv3b/" rel="noreferrer">http://jsfiddle.net/8mcedv3b/</a>

Example HTML:

<pre><code>&lt;ul class="nav navbar-nav" bs-active-link&gt;
 &lt;li&gt;&lt;a href="/home"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

Javascript:

<pre><code>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'); 
 };
 }); 
 });
 }
}
}]);
</code></pre>

blocks|key|192637|text|如果您不想使用AngularStrap，那么这个指令应该可以解决这个问题！这是对https://stackoverflow.com/a/16231859/910764的修改。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|192638|JavaScript|style|BOLD|192639|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('%5E'+%2B+$li.attr('data-match-route')+%2B+'$',+'i'),
++++++++++++isActive+=+regex.test(path);
++++++++++$li.toggleClass('active',+isActive);
++++++++}));
++++++});
++++}
++};
}]);|code-block|syntax|javascript|192640|HTML|192641|<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>|192642|注意：以上的HTML类假定您使用的是Bootstrap+3.x|192643|entityMap|0|LINK|mutability|MUTABLE|url|http://mgcrea.github.io/angular-strap/|1|https://stackoverflow.com/a/16231859/910764|2|http://getbootstrap.com/^0|7|C|0|14|17|1|0|0|A|0|0|0|4|0|0|0|3|I|D|2|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]|$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|6|7|1B|8|@$A|1C|B|1D|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1F|8|@$A|1G|B|1H|F|G]]|9|@]|C|$]]|$1|O|3|P|5|J|7|1I|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1J|8|@$A|1K|B|1L|F|G]]|9|@$A|1M|B|1N|1|1O]]|C|$]]|$1|S|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]|12|$5|V|W|X|C|$Y|13]]]]

If you would rather not use <a href="http://mgcrea.github.io/angular-strap/" rel="nofollow noreferrer">AngularStrap</a> then this directive should do the trick!. This is a modification of <a href="https://stackoverflow.com/a/16231859/910764">https://stackoverflow.com/a/16231859/910764</a>.

JavaScript

<pre><code>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);
 }));
 });
 }
 };
}]);
</code></pre>

HTML

<pre><code>&lt;ul class="nav navbar-nav" bs-navbar&gt;
 &lt;li data-match-route="/home"&gt;&lt;a href="#/home"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li data-match-route="/about"&gt;&lt;a href="#/about"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

Note: The above HTML classes assume you are using <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Bootstrap 3.x</a>

blocks|key|3023970|text|您还可以使用此活动链接指令https://stackoverflow.com/a/23138152/1387163|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3023971|当位置与/url匹配时，父li将获得活动类|3023972|<li>
++++<a+href="#!/url"+active-link+active-link-parent>
</li>|code-block|syntax|javascript|3023973|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/23138152/1387163^0|D|18|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

You can also use this active-link directive <a href="https://stackoverflow.com/a/23138152/1387163">https://stackoverflow.com/a/23138152/1387163</a>

Parent li will get active class when location matches /url:

<pre><code>&lt;li&gt;
 &lt;a href="#!/url" active-link active-link-parent&gt;
&lt;/li&gt;
</code></pre>

blocks|key|188349|text|以下是我对此的看法。在这篇文章中找到了一些答案的组合。我的情况稍有不同，所以我的解决方案包括将菜单分离到它自己的模板中，以便在Directive+Definition+Ojbect中使用，然后将我的导航栏添加到我需要它的页面。基本上，我有一个登录页面，我不想在其中包含我的菜单，所以我使用ngInclude并在登录时插入以下指令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188350|指令：|188351|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;

++++++++}
++++}
+}
});|code-block|syntax|javascript|188352|指令模板(+TEMPLATE+/menu.html)|188353|<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>|188354|包含指令的HTML|188355|<comp-navbar/>|188356|希望这能有所帮助|188357|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Heres my take on it. A little of a combination of answers found on this post. I had a slightly different case, so my solution involves separating the menu into its own template to be used within the Directive Definition Ojbect then add my navbar to the page I needed it on. Basically, I had a login page that I didnt want to include my menu on, so I used ngInclude and insert this directive when logged in:

<h1>DIRECTIVE:</h1>

<pre><code>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;

 }
 }
 }
});
</code></pre>

<h1>DIRECTIVE TEMPLATE (templates/menu.html)</h1>

<pre><code>&lt;ul class="nav navbar-nav"&gt;
 &lt;li ng-class="{ active: isActive('/View1') }"&gt;&lt;a href="#/View1"&gt;View 1&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-class="{ active: isActive('/View2') }"&gt;&lt;a href="#/View2"&gt;View 2&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-class="{ active: isActive('/View3') }"&gt;&lt;a href="#/View3"&gt;View 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h1>HTML WHICH INCLUDES THE DIRECTIVE</h1>

<pre><code>&lt;comp-navbar/&gt;
</code></pre>

Hope this helps

blocks|key|188359|text|这为我做了这个把戏：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188360|++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%2Bdomain.length%2B1);+
++//+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|code-block|syntax|javascript|188361|然后使用jquery(也适用于angular+)添加活动类|188362|$('nav+a[href*="'+%2B+app_name%2B'"]').closest('li').addClass('active');|188363|当然还有css：|188364|.active{background:red;}|188365|如果您的html如下所示，则可以执行此操作：|188366|<ul><li><a+href="/ee">ee</a></li><li><a+href="/dd">dd</a></li></ul>|188367|这将使用页面url自动添加活动的类，如果您在www.somesite.com/ee中的应用程序是活动的，则会将您的背景着色为红色|188368|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

This did the trick for me:

<pre><code> 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
</code></pre>

then you use jquery(works with angular too) to add class active 

<pre><code>$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');
</code></pre>

and of course the css:

<pre><code>.active{background:red;}
</code></pre>

this works if you have your html like this:

<pre><code>&lt;ul&gt;&lt;li&gt;&lt;a href="/ee"&gt;ee&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="/dd"&gt;dd&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
</code></pre>

this will atumatically add class active using the page url and color your background to red if your in www.somesite.com/ee thaen ee is the 'app' and it will be active

blocks|key|188374|text|我建议在链接上使用指令。Here就是小提琴。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|188375|但它还不是完美的。当心hashbang+;)|188376|以下是用于指令的javascript：|188377|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);
++++++++++}
++++++++});
++++++}
++++};
++}]);|code-block|syntax|javascript|188378|下面是它在html中的用法：|188379|<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>|188380|之后使用css设置样式：|188381|.active{+color:red;+}|188382|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kprajapati22/aREmw/^0|C|4|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|C|$]]|$1|S|3|T|5|J|7|1C|8|@]|9|@]|C|$K|L]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

I suggest using a directive on a link.
<a href="http://jsfiddle.net/kprajapati22/aREmw/" rel="nofollow">Here</a> is the fiddle.

But its not perfect yet. Watch out for the hashbangs ;)

Here is the javascript for directive:

<pre><code>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);
 }
 });
 }
 };
 }]);
</code></pre>

and here is how it would be used in html:

<pre><code>&lt;div ng-app="link"&gt;
 &lt;a href="#/one" active-link="active"&gt;One&lt;/a&gt;
 &lt;a href="#/two" active-link="active"&gt;One&lt;/a&gt;
 &lt;a href="#" active-link="active"&gt;home&lt;/a&gt;
&lt;/div&gt;
</code></pre>

afterwards styling with css:

<pre><code>.active{ color:red; }
</code></pre>

blocks|key|190190|text|您可以实际使用的ui-route指令：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|190191|<a+ui-route+ng-href="/">Home</a>
<a+ui-route+ng-href="/about">About</a>
<a+ui-route+ng-href="/contact">Contact</a>|code-block|syntax|javascript|190192|或者：|190193|标题控制器|190194|/**
+*+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.'
++++++}
++++];
++});|190195|索引页|190196|
<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>|190197|如果您正在使用ui-utils，那么您可能还会对用于管理部分/嵌套视图的感兴趣。|190198|entityMap^0|8|8|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|6|7|17|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

You can actually use <a href="http://angular-ui.github.io/ui-utils/#/routing" rel="noreferrer">angular-ui-utils</a>' <code>ui-route</code> directive:

<pre><code>&lt;a ui-route ng-href="/"&gt;Home&lt;/a&gt;
&lt;a ui-route ng-href="/about"&gt;About&lt;/a&gt;
&lt;a ui-route ng-href="/contact"&gt;Contact&lt;/a&gt;
</code></pre>

or:

<h3>Header Controller</h3>

<pre><code>/**
 * 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.'
 }
 ];
 });
</code></pre>

<h3>Index page</h3>

<pre><code>&lt;!-- index.html: --&gt;
&lt;div class="header" ng-controller="HeaderCtrl"&gt;
 &lt;ul class="nav navbar-nav navbar-right"&gt;
 &lt;li ui-route="{{menuItem.url}}" ng-class="{active: $uiRoute}"
 ng-repeat="menuItem in menuItems"&gt;
 &lt;a ng-href="#{{menuItem.url}}" title="{{menuItem.title}}"&gt;
 {{menuItem.name}}
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

If you're using ui-utils, you may also be interested in <a href="https://github.com/angular-ui/ui-router" rel="noreferrer">ui-router</a> for managing partial/nested views.

blocks|key|3024085|text|为了在辩论中补充我的两点意见，我做了一个纯angular模块(没有jquery)，它也可以处理包含数据的散列urls。(i.g.+#/this/is/path?this=is&some=data)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3024086|您只需将模块作为依赖项添加，并将auto-active添加到菜单的其中一个祖先。如下所示：|3024087|<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>|code-block|syntax|javascript|3024088|模块看起来像这样：|3024089|(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('#'+%2B+path+%2B+'(?=\\?%7C$)'))+{
++++++++++++++++++++++++++++++++angular.element(li).addClass('active');
++++++++++++++++++++++++++++}+else+{
++++++++++++++++++++++++++++++++angular.element(li).removeClass('active');
++++++++++++++++++++++++++++}
++++++++++++++++++++++++});
++++++++++++++++++++}
++++++++++++++++}

++++++++++++++++setActive();

++++++++++++++++scope.$on('$locationChangeSuccess',+setActive);
++++++++++++}
++++++++}
++++}]);
}());|3024090|*(当然可以只使用指令部分)|3024091|**还值得注意的是，这不适用于空散列(i.g.+example.com/#或只有example.com)，它需要至少有example.com/#/或只有example.com#/。但这会自动发生在ngResource和类似的应用程序中。|3024092|github：http://jsfiddle.net/gy2an/8/|3024093|Here是github：https://github.com/Karl-Gustav/autoActive|unordered-list-item|3024094|
|3024095|Here是我最初的答案：https://stackoverflow.com/a/22282124/1465640|3024096|
：|3024097|3024098|3024099|entityMap|0|LINK|mutability|MUTABLE|url|http://www.elearnenglishlanguage.com/blog/english-mistakes/eg-vs-ie/|1|2|http://jsfiddle.net/gy2an/8/|3|https://github.com/Karl-Gustav/autoActive|4|https://stackoverflow.com/a/22282124/1465640^0|1T|W|1O|4|0|0|G|B|0|0|0|0|0|O|D|14|B|1N|E|24|D|J|4|1|0|7|S|2|0|C|15|3|0|0|C|18|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|F|3|G|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1W|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1X|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1Z|8|@$9|20|A|21|B|C]|$9|22|A|23|B|C]|$9|24|A|25|B|C]|$9|26|A|27|B|C]]|D|@$9|28|A|29|1|2A]]|E|$]]|$1|U|3|V|5|6|7|2B|8|@]|D|@$9|2C|A|2D|1|2E]]|E|$]]|$1|W|3|X|5|Y|7|2F|8|@]|D|@$9|2G|A|2H|1|2I]]|E|$]]|$1|Z|3|10|5|6|7|2J|8|@]|D|@]|E|$]]|$1|11|3|12|5|Y|7|2K|8|@]|D|@$9|2L|A|2M|1|2N]]|E|$]]|$1|13|3|14|5|6|7|2O|8|@]|D|@]|E|$]]|$1|15|3|-4|5|Y|7|2P|8|@]|D|@]|E|$]]|$1|16|3|-4|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|17|3|-4|5|6|7|2R|8|@]|D|@]|E|$]]]|18|$19|$5|1A|1B|1C|E|$1D|1E]]|1F|$5|1A|1B|1C|E|$1D|1E]]|1G|$5|1A|1B|1C|E|$1D|1H]]|1I|$5|1A|1B|1C|E|$1D|1J]]|1K|$5|1A|1B|1C|E|$1D|1L]]]]

Just to add my two cents in the debate I have made a pure angular module (no jquery), and it will also work with hash urls containing data. (<a href="http://www.elearnenglishlanguage.com/blog/english-mistakes/eg-vs-ie/" rel="nofollow noreferrer">i.g.</a> <code>#/this/is/path?this=is&amp;some=data</code>)

You just add the module as a dependency and <code>auto-active</code> to one of the ancestors of the menu. Like this:

<pre><code>&lt;ul auto-active&gt;
 &lt;li&gt;&lt;a href="#/"&gt;main&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#/first"&gt;first&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#/second"&gt;second&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#/third"&gt;third&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

And the module look like this:

<pre><code>(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);
 }
 }
 }]);
}());
</code></pre>

* (You can of course just use the directive part)

** It's also worth noticing that this doesn't work for empty hashes (<a href="http://www.elearnenglishlanguage.com/blog/english-mistakes/eg-vs-ie/" rel="nofollow noreferrer">i.g.</a> <code>example.com/#</code> or just <code>example.com</code>) it needs to have at least <code>example.com/#/</code> or just <code>example.com#/</code>. But this happens automatically with ngResource and the like.

<ul>
<li>Here is the fiddle: <a href="http://jsfiddle.net/gy2an/8/" rel="nofollow noreferrer">http://jsfiddle.net/gy2an/8/</a></li>
<li>Here is the github: <a href="https://github.com/Karl-Gustav/autoActive" rel="nofollow noreferrer">https://github.com/Karl-Gustav/autoActive</a></li>
<li>Here is my original answer: <a href="https://stackoverflow.com/a/22282124/1465640">https://stackoverflow.com/a/22282124/1465640</a></li>
</ul>

blocks|key|188395|text|JavaScript|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|188396|/**
+*+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();
++++};
}]);|code-block|syntax|javascript|188397|HTML|188398|++<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>|188399|entityMap^0|0|A|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

JavaScript

<pre><code>/**
 * 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();
 };
}]);
</code></pre>

HTML

<pre><code> &lt;div class="navbar-collapse collapse" ng-controller="MainNavCtrl"&gt;
 &lt;ul id="add-magic-line" class="nav navbar-nav navbar-right"&gt;
 &lt;li data-ng-class="{current_page_item: isActive('{{ menuItem.url }}')}" data-ng-repeat="menuItem in menuItems"&gt;
 &lt;a data-ng-href="#{{menuItem.url}}" title="{{menuItem.title}}"&gt;
 {{menuItem.name}}
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
</code></pre>

blocks|key|188401|text|我发现所有这些答案对我来说都有点复杂，抱歉。所以我已经创建了一个小指令，它应该在每个导航栏的基础上工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188402|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');
++++++++++++});
++++++++}
++++};
});|code-block|syntax|javascript|188403|用法：|188404|<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>|188405|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I find all of these answers a bit over complicated for me, sorry. So I have created a small directive that should work on a per navbar basis:

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

Usage:

<pre><code>&lt;ul class="nav navbar-nav navbar-right" active-link&gt;
 &lt;li class="nav active"&gt;&lt;a href="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li class="nav"&gt;&lt;a href="foo"&gt;Foo&lt;/a&gt;&lt;/li&gt;
 &lt;li class="nav"&gt;&lt;a href="bar"&gt;Bar&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|2811458|text|这是一个简单的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2811459|<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>|code-block|syntax|javascript|2811460|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is a simple solution

<pre><code>&lt;ul class="nav navbar-nav navbar-right navbar-default menu"&gt;
 &lt;li ng-class="menuIndice == 1 ? 'active':''"&gt;
 &lt;a ng-click="menuIndice = 1" href="#/item1"&gt;item1&lt;/a&gt;
 &lt;/li&gt;
 &lt;li ng-class="menuIndice == 2 ? 'active':''"&gt;
 &lt;a ng-click="menuIndice = 2" href="#/item2"&gt;item2&lt;/a&gt;
 &lt;/li&gt;
 &lt;li ng-class="menuIndice == 3 ? 'active':''"&gt;
 &lt;a ng-click="menuIndice = 3" href="#/item3"&gt;item3&lt;/a&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|192767|text|感谢@Pylinux。我使用了他的技术，并对其进行了修改，以支持“一个”级别的下拉菜单(sub+ul/li)，因为这正是我所需要的。在下面的小提琴链接中可以看到它的实际效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|192768|基于pylinux的答案-+http://jsfiddle.net/abhatia/en4qxw6g/更新了提琴|192769|为了支持一级下拉菜单，我做了以下三个更改：|192770|192771|为li下的"a“元素添加了一个类值dd+(dropdown)，该元素需要有子ul列表。|ordered-list-item|192772|192773|+++++++++<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>|code-block|syntax|javascript|192774|192775|更新了Javascript以添加以下新逻辑。|192776|192777|+if(angular.element(li).parent().parent().children('a').hasClass("dd"))
+{angular.element(li).parent().parent().children('a.dd').addClass('active');}|192778|192779|更新了CSS，添加了以下内容：|192780|192781|a.active+{background-color:red;}|192782|希望这将对那些希望实现单级下拉菜单的人有所帮助。|192783|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1465640/pylinux|1|http://jsfiddle.net/abhatia/en4qxw6g/^0|2|8|0|0|E|11|1|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|D|3|E|5|6|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]]|C|$]]|$1|F|3|G|5|6|7|1N|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]|$1|I|3|J|5|K|7|1P|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|1R|8|@]|9|@]|C|$P|Q]]|$1|R|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]|$1|S|3|T|5|K|7|1T|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]|$1|V|3|W|5|O|7|1V|8|@]|9|@]|C|$P|Q]]|$1|X|3|-4|5|6|7|1W|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|K|7|1X|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|11|3|12|5|O|7|1Z|8|@]|9|@]|C|$P|Q]]|$1|13|3|14|5|6|7|20|8|@]|9|@]|C|$]]|$1|15|3|-4|5|6|7|21|8|@]|9|@]|C|$]]]|16|$17|$5|18|19|1A|C|$1B|1C]]|1D|$5|18|19|1A|C|$1B|1E]]]]

Thanks to <a href="https://stackoverflow.com/users/1465640/pylinux">@Pylinux</a>. I have used his technique and also modified it to support "one" level of drop down menu (sub ul/li), as that is what I needed. See it in action in the fiddle link below. 

Updated Fiddle based on pylinux's answer - <a href="http://jsfiddle.net/abhatia/en4qxw6g/" rel="nofollow noreferrer">http://jsfiddle.net/abhatia/en4qxw6g/</a>

I made the following three changes, in order to support one level drop down menu:
 1. Added a class value of dd (dropdown) for "a" element under li which needs to have sub ul list. 

<pre><code> &lt;li&gt;&lt;a class="dd"&gt;This link points to #/fun5&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#/fun6?some=data"&gt;This link points to #/fun6&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#/fun7?some=data"&gt;This link points to #/fun7&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#/fun8?some=data"&gt;This link points to #/fun8&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#/fun9?some=data"&gt;This link points to #/fun9&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
</code></pre>

 2. Updated Javascript to add the following new logic.

<pre><code> if(angular.element(li).parent().parent().children('a').hasClass("dd"))
 {angular.element(li).parent().parent().children('a.dd').addClass('active');}
</code></pre>

 3. Updated CSS to the add the following:

<pre><code>a.active {background-color:red;}
</code></pre>

Hopefully this will be helpful to someone looking to implement single level dropdown menu.

blocks|key|3024244|text|这是一个很长的答案，但我想我应该分享我的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3024245|.run(function($rootScope,+$state){
+$rootScope.$state+=+$state;
});|code-block|syntax|javascript|3024246|模板：|3024247|<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>|3024248|对于那些使用ui-router的用户|offset|length|style|CODE|3024249|<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>|3024250|精确匹配(例如嵌套状态？)使用$state.name+===+'full/path/to/state'或ui-sref-active-eq="active"|3024251|entityMap^0|0|0|0|0|6|9|0|0|F|10|1G|Q|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|14|8|@$M|15|N|16|O|P]|$M|17|N|18|O|P]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

This is long answered but I thought I'd share my way:

<pre><code>.run(function($rootScope, $state){
 $rootScope.$state = $state;
});
</code></pre>

Template:

<pre><code>&lt;ul class="nav navbar-nav"&gt;
 &lt;li ng-class="{ active: $state.contains('View1') }"&gt;&lt;a href="..."&gt;View 1&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-class="{ active: $state.contains('View2') }"&gt;&lt;a href="..."&gt;View 2&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-class="{ active: $state.contains('View3') }"&gt;&lt;a href="..."&gt;View 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

For those using <code>ui-router</code>:

<pre><code>&lt;ul class="nav navbar-nav"&gt;
 &lt;li ui-sref-active="active"&gt;&lt;a href="..."&gt;View 1&lt;/a&gt;&lt;/li&gt;
 &lt;li ui-sref-active="active"&gt;&lt;a href="..."&gt;View 2&lt;/a&gt;&lt;/li&gt;
 &lt;li ui-sref-active="active"&gt;&lt;a href="..."&gt;View 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

For exact match (eg nested states?) use <code>$state.name === 'full/path/to/state'</code> or <code>ui-sref-active-eq="active"</code>

blocks|key|3024256|text|对于任何可能感兴趣的人，这里有另一个解决方案。这样做的好处是它具有更少的依赖项。见鬼，它也可以在没有web服务器的情况下工作。所以它完全是客户端的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3024257|HTML：|3024258|<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"></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>|code-block|syntax|javascript|3024259|​|3024260|解释：|3024261|在这里，我们使用ng-repeat指令从angularjs模型动态生成链接。在下面给出的这个导航栏的控制器中定义了selectTab()和getTabClass()方法，魔术就会发生。|offset|length|style|CODE|3024262|控制器：|3024263|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+:+"";
++++};
});|3024264|3024265|使用ng-click指令调用selectTab()方法。因此，当单击该链接时，变量selectedTab将设置为该链接的名称。在HTML中，您可以看到调用此方法时没有使用Home选项卡的任何参数，以便在页面加载时将其突出显示。|3024266|通过HTML中的ng-class指令调用getTabClass()方法。此方法检查它所在的选项卡是否与selectedTab变量的值相同。如果为true，则返回"active“否则返回"”，由ng-class指令将其作为类名应用。然后，您应用于类active的任何css都将应用于所选的选项卡。|3024267|entityMap^0|0|0|0|0|0|8|9|1L|B|1X|D|0|0|0|0|2|8|E|B|15|B|0|8|8|K|D|1F|B|2O|8|3F|6|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|18|8|@$O|19|P|1A|Q|R]|$O|1B|P|1C|Q|R]|$O|1D|P|1E|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1F|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|W|3|L|5|6|7|1H|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1I|8|@$O|1J|P|1K|Q|R]|$O|1L|P|1M|Q|R]|$O|1N|P|1O|Q|R]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1P|8|@$O|1Q|P|1R|Q|R]|$O|1S|P|1T|Q|R]|$O|1U|P|1V|Q|R]|$O|1W|P|1X|Q|R]|$O|1Y|P|1Z|Q|R]]|9|@]|A|$]]|$1|11|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|12|$]]

Here's another solution for anyone who might be interested. The advantage of this is it has fewer dependencies. Heck, it works without a web server too. So it's completely client-side.

HTML:

<pre><code>&lt;nav class="navbar navbar-inverse" ng-controller="topNavBarCtrl""&gt;
&lt;div class="container-fluid"&gt;
 &lt;div class="navbar-header"&gt;
 &lt;a class="navbar-brand" href="#"&gt;&lt;span class="glyphicon glyphicon-home" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
 &lt;/div&gt;
 &lt;ul class="nav navbar-nav"&gt;
 &lt;li ng-click="selectTab()" ng-class="getTabClass()"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"&gt;&lt;a href="#"&gt;{{ tab }}&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>



Explanation:

Here we are generating the links dynamically from an angularjs model using the directive <code>ng-repeat</code>. Magic happens with the methods <code>selectTab()</code> and <code>getTabClass()</code> defined in the controller for this navbar presented below.

Controller:

<pre><code>angular.module("app.NavigationControllersModule", [])

// Constant named 'activeTab' holding the value 'active'. We will use this to set the class name of the &lt;li&gt; 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 : "";
 };
});
</code></pre>

Explanation:

<code>selectTab()</code> method is called using <code>ng-click</code> directive. So when the link is clicked, the variable <code>selectedTab</code> is set to the name of this link. In the HTML you can see that this method is called without any argument for Home tab so that it will be highlighted when the page loads.

The <code>getTabClass()</code> method is called via <code>ng-class</code> directive in the HTML. This method checks if the tab it is in is the same as the value of the <code>selectedTab</code> variable. If true, it returns "active" else returns "" which is applied as the class name by <code>ng-class</code> directive. Then whatever css you have applied to class <code>active</code> will be applied to the selected tab.

blocks|key|3024285|text|只需添加所需的active-class和所需的颜色代码即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3024286|例如：ng-class="{'active':+currentNavSelected}"+ng-click="setNav"|3024287|entityMap^0|7|6|0|3|1N|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

Just you'll have to add the required <code>active</code>-class with required color code. 

Ex: <code>ng-class="{'active': currentNavSelected}" ng-click="setNav"</code>

blocks|key|188485|text|如果您使用ui-router，下面的示例将基于@DanPantry对接受的答案的注释来满足您的需求，而无需添加任何控制器端代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|188486|<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>|code-block|syntax|javascript|188487|你可以查看docs了解更多关于它的信息。|188488|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular-ui/ui-router|1|https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref-active^0|5|9|0|0|0|5|4|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

If you use <a href="https://github.com/angular-ui/ui-router" rel="nofollow noreferrer">ui-router</a>, the following example should satisfy your needs based on @DanPantry's comment on the accepted answer without adding any controller-side code:

<pre><code>&lt;div class="collapse navbar-collapse" ng-controller="HeaderController"&gt;
 &lt;ul class="nav navbar-nav"&gt;
 &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="app.home()" href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="app.dogs()" href="/dogs"&gt;Dogs&lt;/a&gt;&lt;/li&gt;
 &lt;li ui-sref-active="active"&gt;&lt;a ui-sref="app.cats()" href="/cats"&gt;Cats&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;div ng-view&gt;&lt;/div&gt;
</code></pre>

You can check the <a href="https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref-active" rel="nofollow noreferrer">docs</a> for more info on it.

blocks|key|2811595|text|如果你正在使用Angular路由器，RouterLinkActive++directive可以非常优雅地使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2811596|<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>|code-block|syntax|javascript|2811597|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html^0|I|R|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

If you are working with Angular router, the <a href="https://angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html" rel="noreferrer">RouterLinkActive
 directive</a> can be used really elegantly:

<pre><code>&lt;ul class="navbar-nav"&gt;
 &lt;li class="nav-item"&gt;&lt;a class="nav-link" routerLink="home" routerLinkActive="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li class="nav-item"&gt;&lt;a class="nav-link" routerLink="gallery" routerLinkActive="active"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
 &lt;li class="nav-item"&gt;&lt;a class="nav-link" routerLink="pricing" routerLinkActive="active"&gt;Prices&lt;/a&gt;&lt;/li&gt;
 &lt;li class="nav-item"&gt;&lt;a class="nav-link" routerLink="contact" routerLinkActive="active"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|2811614|text|将对象用作开关变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2811615|您可以非常简单地使用以下命令内联完成此操作：|2811616|<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>|code-block|syntax|javascript|2811617|每次单击链接时，switch对象都会被一个新对象替换，其中只有正确的switch对象属性为true。未定义的属性将计算为false，因此依赖于它们的元素将不会分配活动类。|2811618|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Use an object as a switch variable. 
You can do this inline quite simply with:

<pre><code>&lt;ul class="nav navbar-nav"&gt;
 &lt;li ng-class="{'active':switch.linkOne}" ng-click="switch = {linkOne: true}"&gt;&lt;a href="/"&gt;Link One&lt;/a&gt;&lt;/li&gt;
 &lt;li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"&gt;&lt;a href="/link-two"&gt;Link Two&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

Each time you click on a link the switch object is replaced by a new object where only the correct switch object property is true. The undefined properties will evaluate as false and so the elements which depend on them will not have the active class assigned.

If I have a navbar in bootstrap with the items

<pre><code>Home | About | Contact
</code></pre>

How do I set the active class for each menu item when they are active? That is, how can I set <code>class="active"</code> when the angular route is at 

<ol>
<li><code>#/</code> for home</li>
<li><code>#/about</code> for the about page</li>
<li><code>#/contact</code> for the contact page</li>
</ol>

How to set bootstrap navbar active class with Angular JS?

服务器

路由器

Web App

路由

如果我在bootstrap中有一个导航栏，其中包含以下项目Home | About | Contact当每个菜单项处于活动状态时，如何为其设置活动类？也就是说，当角度路径位于时，如何设置class="active"用于home#/about的#/，用于联系页面的关于page#/contact

问如何用Angular JS设置bootstrap navbar活动类？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用Angular JS设置bootstrap navbar活动类？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用Angular JS设置bootstrap navbar活动类？
EN