如何使用AngularJS显示导航菜单,该菜单根据正在查看的路线更改"活动"类？

Question

我只想在我的应用中显示如下的导航菜单:

<ul>
  <li><a href="#/section1">Section 1</a></li>

  <li class="active"><a href="#/section2">Section 2</a></li>

  <li><a href="#/section3">Section 3</a></li>
</ul>

在这里,单击第1部分,第2部分或第3部分将分别触发路径更改.目前,<li>对于第2部分,该类active具有其当前活动路线的类别.我只是想移动这个类,所以例如,如果单击第3节,我希望li第3节有active类.

实现这一目标的最佳方法是什么？

Answer 1

您可以监听$ routeChangeSuccess事件(请参阅$ route文档)以检测更改.

重新格式化您的控制器和HTML格式如下:

$scope.navList = [
  { url: '/route1', title: 'Route 1'},
  { url: '/route2', title: 'Route 2'},
  { url: '/route3', title: 'Route 3'}
];

<ul>
  <li ng-repeat="item in navList">
    <a ng-class="{active:item.active}" href="#{{item.url}}">{{item.title}}</a>
  </li>
</ul>

然后监听更改(在您的控制器中):

function detectRoute() {
  angular.forEach($scope.navList, function(item) {
    item.active = $location.path().match(new RegExp(item.url)) ? true : false;
  });  
}

$scope.$on('$routeChangeSuccess', detectRoute);

请参阅Plunker中的示例.

我把它包装在一个模块中:https://github.com/Espesen/angular-simple-navbar