Javascript 将路由和导航样式与AngularJS关联

假设您在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

？等等。我对这两个选项都有问题，因为当我实现它时，这两个选项看起来都不干净。

我使用下一个代码：

<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> 

---

简单，适用于一般情况。如果你有一条像

/news/：id

这样的路线，这种情况就会开始崩溃，不是吗？如果您正在查看新闻文章，那么仍然可以使用

.active

类指示您在新闻页面上。是的，这是一个问题。我通过$rootScope.current=“/”+$location.path（）.split（“/”[1]）临时解决了这个问题；但这个解决方案远远不是好的解决方案。仍在等待有效的解决方案。听起来我们在同一条船上。我想到的最简单的解决方案（尽管很复杂）是在

$rootScope

中跟踪要高亮显示的当前导航项目，然后与导航项目相关的每个控制器都会更改

$rootScope

。我相信还有更好的办法。

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