使用AngularJS突出显示侧栏上的当前选项卡

时间:2016-03-14 22:31:17

标签: angularjs twitter-bootstrap twitter-bootstrap-3 controller sidebar

我正在创建一个基于此的侧边栏

从此http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview

中找到

tutorial

但是,我希望在单击链接后保持选择处于活动状态。我尝试过添加数据切换,但这似乎适用于导航丸而不是导航栏。我还发现了一个我试图实现的is-active-nav指令:

angular.module('sidebarmodule')
    .directive('isActiveNav', ['$location', function ($location) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            scope.location = $location;
            scope.$watch('location.path()', function (currentPath) {
                if ('/#' + currentPath === element[0].attributes['href'].nodeValue) {
                    element.parent().addClass('active');
                } else {
                    element.parent().removeClass('active');
                }
            });

        }
    };
}]);

我在侧边栏模板中调用如下:

<li> <a is-active-nav href="#">Link1</a> </li>

我尝试的另一种方法是在我的控制器中添加

$scope.isActive = function (viewLocation) { return viewLocation === $location.path(); }; 

然后添加到模板:

<li ng-class="{ active: isActive('/importinvoice')}"><a href="#/firstlink">First Link</a></li>

但是,我所做的任何事情都不会在导航到该页面后突出显示侧边栏元素。我试图避开jQuery,因为我希望它只是一个AngularJS解决方案。

我尝试了stackoverflow answer中的大多数解决方案,但无法让任何一个解决方案在plunker上工作。

1 个答案:

答案 0 :(得分:1)

你走在正确的轨道上:

每个列表元素的isActive函数需要传入与其匹配的参数 - 所以在给定的示例中,它应该是:

<li ng-class="{ active: isActive('/firstlink')}"><a href="#/firstlink">First Link</a></li>

您还需要在CSS中添加活动类的样式。我不确定你是否已经这样做,因为你提供的傻瓜是不完整的。

请在此处查看我的Plunkr:http://plnkr.co/edit/zE6sXEn4wHJufOlnNeld