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

Question

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

如果我在引导程序中有一个带有项目的导航栏

Home | About | Contact

如何为每个菜单项激活时设置活动类？也就是说，如何设置class="active"角度路径的时间

1. #/ 为了家

2. #/about 对于关于页面

3. #/contact 对于联系页面

Answer 1

一种非常优雅的方法是使用ng-controller在ng-view之外运行单个控制器：<div&nbsp;class="collapse&nbsp;navbar-collapse"&nbsp;ng-controller="HeaderController"> &nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="nav&nbsp;navbar-nav"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;ng-class="{&nbsp;active:&nbsp;isActive('/')}"><a&nbsp;href="/">Home</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;ng-class="{&nbsp;active:&nbsp;isActive('/dogs')}"><a&nbsp;href="/dogs">Dogs</a></li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;ng-class="{&nbsp;active:&nbsp;isActive('/cats')}"><a&nbsp;href="/cats">Cats</a></li> &nbsp;&nbsp;&nbsp;&nbsp;</ul></div><div&nbsp;ng-view></div>并包含在controllers.js中：function&nbsp;HeaderController($scope,&nbsp;$location)&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;$scope.isActive&nbsp;=&nbsp;function&nbsp;(viewLocation)&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;viewLocation&nbsp;===&nbsp;$location.path(); &nbsp;&nbsp;&nbsp;&nbsp;};}