如果我在引导程序中有导航栏
Home | About | Contact
当每个菜单项处于活动状态时,如何设置它们的活动类?也就是说,class="active"当角度路线位于
class="active"
#/
#/about
#/contact
一种非常优雅的方法是使用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(); }; }