javascript - 如何使用 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

Answer 2

控制器功能：

...
$scope.isActive = function (viewLocation) {
  return viewLocation === $location.path();
};
...

Answer 3

我通过使用引导程序实现了这一点，它可能会帮助你

$('ul.nav > li').click(function (e) {
        e.preventDefault();
        $('ul.nav > li').removeClass('active');
        $(this).addClass('active');                
    });

工作小提琴在这里