AngularJS在为当前页面的链接设置一个活动类方面有任何帮助吗?
我想一定有什么神奇的方法可以做到，但我似乎找不到。
我的菜单是这样的:
<ul>
<li><a class="active" href="/tasks">Tasks</a>
<li><a href="/actions">Tasks</a>
</ul>
我在我的路由中为它们每个都有控制器:TasksController和ActionsController。
但是我想不出一种方法将a链接上的“活动”类绑定到控制器。
有提示吗?
当前回答
对于那些使用ui-router的人，我的答案有点类似于Ender2050，但我更喜欢通过州名测试来做到这一点:
$scope.isActive = function (stateName) {
var active = (stateName === $state.current.name);
return active;
};
相应的HTML:
<ul class="nav nav-sidebar">
<li ng-class="{ active: isActive('app.home') }"><a ui-sref="app.home">Dashboard</a></li>
<li ng-class="{ active: isActive('app.tiles') }"><a ui-sref="app.tiles">Tiles</a></li>
</ul>
其他回答
路线:
$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();
...
我在这里发现的问题是，菜单项只有在加载整个页面时才处于活动状态。当部分视图被加载时，菜单不会改变。有人知道为什么吗?
这是一个扩展的kfis指令，我做了允许不同级别的路径匹配。从本质上讲，我发现需要匹配URL路径到一定深度，因为精确匹配不允许嵌套和默认状态重定向。希望这能有所帮助。
.directive('selectedLink', ['$location', function(location) {
return {
restrict: 'A',
scope:{
selectedLink : '='
},
link: function(scope, element, attrs, controller) {
var level = scope.selectedLink;
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) {
var i=0;
p = path.split('/');
n = newPath.split('/');
for( i ; i < p.length; i++) {
if( p[i] == 'undefined' || n[i] == 'undefined' || (p[i] != n[i]) ) break;
}
if ( (i-1) >= level) {
element.addClass("selected");
}
else {
element.removeClass("selected");
}
});
}
};
}]);
下面是我如何使用这个链接
<nav>
<a href="#/info/project/list" selected-link="2">Project</a>
<a href="#/info/company/list" selected-link="2">Company</a>
<a href="#/info/person/list" selected-link="2">Person</a>
</nav>
该指令将匹配在该指令的属性值中指定的深度级别。只是意味着它可以在其他地方多次使用。
使用angular-ui-router的ui-sref-active指令 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statename
<德> <li ui-sref-active=“active”类=“项目”> <a href ="应用程序。用户({用户:‘bilbobaggins})“> @bilbobaggins < / a > < / li > < !——...--> < /德>
对于AngularUI路由器用户:
<a ui-sref-active="active" ui-sref="app">
这将在选中的对象上放置一个活动类。
有一个ng-class指令，它绑定变量和css类。 它还接受对象(className vs bool值对)。
这里有一个例子，http://plnkr.co/edit/SWZAqj
