AngularJS在为当前页面的链接设置一个活动类方面有任何帮助吗?
我想一定有什么神奇的方法可以做到，但我似乎找不到。
我的菜单是这样的:
<ul>
<li><a class="active" href="/tasks">Tasks</a>
<li><a href="/actions">Tasks</a>
</ul>
我在我的路由中为它们每个都有控制器:TasksController和ActionsController。
但是我想不出一种方法将a链接上的“活动”类绑定到控制器。
有提示吗?
当前回答
路线:
$routeProvider.when('/Account/', { templateUrl: '/Home/Account', controller: 'HomeController' });
菜单html:
<li id="liInicio" ng-class="{'active':url=='account'}">
控制器:
angular.module('Home').controller('HomeController', function ($scope, $http, $location) {
$scope.url = $location.url().replace(/\//g, "").toLowerCase();
...
我在这里发现的问题是，菜单项只有在加载整个页面时才处于活动状态。当部分视图被加载时，菜单不会改变。有人知道为什么吗?
其他回答
$scope.getClass = function (path) {
return String(($location.absUrl().split('?')[0]).indexOf(path)) > -1 ? 'active' : ''
}
<li class="listing-head" ng-class="getClass('/v/bookings')"><a href="/v/bookings">MY BOOKING</a></li>
<li class="listing-head" ng-class="getClass('/v/fleets')"><a href="/v/fleets">MY FLEET</a></li>
<li class="listing-head" ng-class="getClass('/v/adddriver')"><a href="/v/adddriver">ADD DRIVER</a></li>
<li class="listing-head" ng-class="getClass('/v/bookings')"><a href="/v/invoice">INVOICE</a></li>
<li class="listing-head" ng-class="getClass('/v/profile')"><a href="/v/profile">MY PROFILE</a></li>
<li class="listing-head"><a href="/v/logout">LOG OUT</a></li>
使用Angular Version 6和Bootstrap 4.1
我能够做到如下所示。
在下面的例子中，当URL看到'/contact'时，引导活动就会被添加到html标记中。当URL改变时，它就会被删除。
<ul>
<li class="nav-item" routerLink="/contact" routerLinkActive="active">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
这个指令允许你在链接的时候给元素添加一个CSS类 路由激活。
在Angular网站上阅读更多信息
来自@Renan-tomal-fernandes的回答很好，但需要进行一些改进才能正确工作。 事实上，它总是在触发时检测到到主页(/)的链接，即使你在另一个部分。
我稍微改进了一下，这是代码。 我使用Bootstrap，所以活动部分是在<li>元素，而不是<a>。
控制器
$scope.getClass = function(path) {
var cur_path = $location.path().substr(0, path.length);
if (cur_path == path) {
if($location.path().substr(0).length > 1 && path.length == 1 )
return "";
else
return "active";
} else {
return "";
}
}
模板
<div class="nav-collapse collapse">
<ul class="nav">
<li ng-class="getClass('/')"><a href="#/">Home</a></li>
<li ng-class="getClass('/contents/')"><a href="#/contests/">Contents</a></li>
<li ng-class="getClass('/data/')"><a href="#/data/">Your data</a></li>
</ul>
</div>
我建议在链接上使用指令。
但它还不完美。小心哈希邦;)
下面是指令的javascript代码:
angular.module('link', []).
directive('activeLink', ['$location', function (location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var clazz = attrs.activeLink;
var path = attrs.href;
path = path.substring(1); //hack because path does not return including hashbang
scope.location = location;
scope.$watch('location.path()', function (newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
下面是它在html中的用法:
<div ng-app="link">
<a href="#/one" active-link="active">One</a>
<a href="#/two" active-link="active">One</a>
<a href="#" active-link="active">home</a>
</div>
之后用css样式:
.active { color: red; }
有一个ng-class指令，它绑定变量和css类。 它还接受对象(className vs bool值对)。
这里有一个例子，http://plnkr.co/edit/SWZAqj
