假设您在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
?等等。我对这两个选项都有问题,因为当我实现它时似乎都不是很干净。
答案 0 :(得分:0)
我使用下一个代码:
<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();
});
}]);