我在我的页面上使用了Angular Routing,并且我还想突出显示与当前内容对应的菜单项。
我尝试使用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。您能帮我吗?