使用 AngularJS 关联路由和导航样式

Question

假设您在 Angular 中设置了一个基本路由器，如下所示：

app.config(function($routeProvider) {
    $routeProvider.when('/', {
        redirectTo: "/news"
    }).when('/news', {
        templateUrl: "partials/pages/news.html",
        controller: "NewsCtrl"
    }).when('/about', {
        templateUrl: "partials/pages/about.html",
        controller: "AboutCtrl"
    })
});

然后你有一个index.html，看起来像：

<nav>
    <ul>
        <li><a href="#/news" class="active">news</a></li>
        <li><a href="#/about">about</a></li>
    </ul>
</nav>
<section ng-view></section>

将.active 类添加到路由对应的链接的最佳方法是什么？为导航创建一个控制器？使用$rootScope?等等。我对这两个选项都有问题，因为当我实现它时，它们看起来都不是很干净。

Answer 1

我使用下一个代码：

<ul class="navigation">
  <li ng-class="{active : (current == '/')}"><a href="/"><span>Articles</span></a></li>
  <li ng-class="{active : (current == '/about')}"><a href="/about"><span>About</span></a></li>
  <li ng-class="{active : (current == '/contact')}"><a href="/contact"><span>Contact</span></a></li>            
</ul> 

在 JS 中：

app.run(['$location', '$rootScope', function($location, $rootScope, $document) {
    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        $rootScope.current = $location.path();
    });
}]);