AngularJS在为当前页面的链接设置一个活动类方面有任何帮助吗?
我想一定有什么神奇的方法可以做到,但我似乎找不到。
我的菜单是这样的:
<ul>
<li><a class="active" href="/tasks">Tasks</a>
<li><a href="/actions">Tasks</a>
</ul>
我在我的路由中为它们每个都有控制器:TasksController和ActionsController。
但是我想不出一种方法将a链接上的“活动”类绑定到控制器。
有提示吗?
我有类似的问题,菜单位于控制器范围之外。不确定这是最好的解决方案还是推荐的解决方案,但这对我来说是有效的。我已经在我的应用程序配置中添加了以下内容:
var app = angular.module('myApp');
app.run(function($rootScope, $location){
$rootScope.menuActive = function(url, exactMatch){
if (exactMatch){
return $location.path() == url;
}
else {
return $location.path().indexOf(url) == 0;
}
}
});
那么在视图中,我有:
<li><a href="/" ng-class="{true: 'active'}[menuActive('/', true)]">Home</a></li>
<li><a href="/register" ng-class="{true: 'active'}[menuActive('/register')]">
<li>...</li>
来自@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>
我做了一个纯angular模块(没有jQuery),它也可以处理包含数据的散列url。(例如:# /这个/ /路径?这=一些=数据)
您只需将模块作为依赖项添加并自动激活到菜单的一个祖先。是这样的:
<ul auto-active>
<li><a href="#/">main</a></li>
<li><a href="#/first">first</a></li>
<li><a href="#/second">second</a></li>
<li><a href="#/third">third</a></li>
</ul>
这个模块是这样的:
(function () {
angular.module('autoActive', [])
.directive('autoActive', ['$location', function ($location) {
return {
restrict: 'A',
scope: false,
link: function (scope, element) {
function setActive() {
var path = $location.path();
if (path) {
angular.forEach(element.find('li'), function (li) {
var anchor = li.querySelector('a');
if (anchor.href.match('#' + path + '(?=\\?|$)')) {
angular.element(li).addClass('active');
} else {
angular.element(li).removeClass('active');
}
});
}
}
setActive();
scope.$on('$locationChangeSuccess', setActive);
}
}
}]);
}());
(当然,你可以只使用指令部分)
值得注意的是,这并不适用于空哈希值(例如example.com/#或仅example.com),它至少需要example.com/#/或仅example.com#/。但这是自动发生的ngResource之类的。
这是小提琴:http://jsfiddle.net/gy2an/8/
在我的例子中,我通过创建一个负责导航的简单控制器来解决这个问题
angular.module('DemoApp')
.controller('NavigationCtrl', ['$scope', '$location', function ($scope, $location) {
$scope.isCurrentPath = function (path) {
return $location.path() == path;
};
}]);
只需像这样在元素中添加ng-class:
<ul class="nav" ng-controller="NavigationCtrl">
<li ng-class="{ active: isCurrentPath('/') }"><a href="#/">Home</a></li>
<li ng-class="{ active: isCurrentPath('/about') }"><a href="#/about">About</a></li>
<li ng-class="{ active: isCurrentPath('/contact') }"><a href="#/contact">Contact</a></li>
</ul>
以上的指导性建议对我都没用。如果你有一个这样的引导导航栏
<ul class="nav navbar-nav">
<li><a ng-href="#/">Home</a></li>
<li><a ng-href="#/about">About</a></li>
...
</ul>
(可以是$ yo的angular启动)然后你要将.active添加到父元素<li>类列表中,而不是元素本身;即<li class="active">..</li>. .所以我写了这个:
.directive('setParentActive', ['$location', function($location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var classActive = attrs.setParentActive || 'active',
path = attrs.ngHref.replace('#', '');
scope.location = $location;
scope.$watch('location.path()', function(newPath) {
if (path == newPath) {
element.parent().addClass(classActive);
} else {
element.parent().removeClass(classActive);
}
})
}
}
}])
使用set-parent-active;.active是默认值,所以不需要设置
<li><a ng-href="#/about" set-parent-active>About</a></li>
当链接激活时,父元素<li>将是.active。要使用另一个.active类,如.highlight,只需
<li><a ng-href="#/about" set-parent-active="highlight">About</a></li>