如何使用 Angular 突出显示指向当前页面的链接？
Posted
技术标签:
【中文标题】如何使用 Angular 突出显示指向当前页面的链接？【英文标题】：How can I highlight link to current page with Angular? 【发布时间】：2014-11-01 10:36:28 【问题描述】：我在我的页面上使用 Angular Routing，我还想突出显示与当前内容对应的菜单项。
我尝试使用像in this post 这样的 ngClass 和控制器，但没有效果
代码如下：
index.html
<body ng-app="sApp">
<div ng-controller="NavCtrl" class="nav">
<ul>
<li ng-class=" active-btn: isActive('/')">
<a href="#" class="menu-btn">HOME</a>
</li>
<li ng-class=" active-btn: isActive('/1')">
<a href="#/1" class="menu-btn">PAGE1</a>
</li>
<li ng-class=" active-btn: isActive('/2')">
<a href="#/2" class="menu-btn">PAGE2</a>
</li>
</ul>
</div>
<div class="content" ng-view=""></div>
style.css
.nav
padding: 1rem;
text-align: center;
background-color: #ffa500;
.nav ul li
display: inline;
font-weight: 700;
.menu-btn
padding: 1rem;
.menu-btn:hover
background-color: #ee82ee;
.active-btn
background-color: #00f;
script.js
'use strict';
var sApp;
sApp = angular.module('sApp', ['ngRoute']);
sApp.config(function($routeProvider)
return $routeProvider
.when('/', templateUrl: 'h.html')
.when('/1', templateUrl: '1.html')
.when('/2', templateUrl: '2.html')
.otherwise(redirectTo: '/');
);
sApp.controller('NavCtrl', function($scope, $location)
$scope.isActive = function(viewLocation)
return viewLocation === $location.path();
;
);
这里是plunker：
看起来菜单项无法将类更改为 active-btn。 你能帮帮我吗？
【问题讨论】：
【参考方案1】：你可以这样做：
<li ng-class="active: $route.current.loadedTemplateUrl=='/1'">
My 1 active
</li>
【讨论】：
【参考方案2】：<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="sApp">
<div ng-controller="NavCtrl" class="nav">
<ul>
<li ng-class="classActive('/')">
<a href="#" class="menu-btn">HOME</a>
</li>
<li ng-class="classActive('/1')">
<a href="#/1" class="menu-btn">PAGE1</a>
</li>
<li ng-class="classActive('/2')">
<a href="#/2" class="menu-btn">PAGE2</a>
</li>
</ul>
</div>
<div class="content" ng-view=""></div>
</body>
</html>
还有 script.js
'use strict';
var sApp;
sApp = angular.module('sApp', ['ngRoute']);
sApp.config(function($routeProvider)
return $routeProvider
.when('/', templateUrl: 'h.html')
.when('/1', templateUrl: '1.html')
.when('/2', templateUrl: '2.html')
.otherwise(redirectTo: '/');
);
sApp.controller('NavCtrl', function($scope, $location)
$scope.isActive = function(viewLocation)
return viewLocation === $location.path();
;
$scope.classActive = function( viewLocation )
if( $scope.isActive(viewLocation) )
return 'active-btn';
else
return 'inactive-btn';
);
最好不要在 html 中添加太多逻辑，这样的功能更有意义。更有意义的是将所有菜单内容包装在一个对象中并迭代该对象。然后，您还可以例如收听 locationsuccess 并仅更改对象，而无需在单击时更改它。这样它不依赖于点击。
我就是这样做的，这样逻辑也可以保留在抽象服务中并且更可重用。
祝你好运！
【讨论】：
谢谢，这解决了我的问题；）我会按照您的建议尝试将整个菜单设为对象以上是关于如何使用 Angular 突出显示指向当前页面的链接？的主要内容，如果未能解决你的问题，请参考以下文章
使用 Sprite 的 CSS 导航菜单：如何突出显示当前页面的选项卡/按钮？