使用 AngularJS 在边栏上突出显示当前选项卡

Question

我正在基于这个创建侧边栏

http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview found from this tutorial

但是我想在单击 link 后保持选择处于活动状态。我试过添加数据切换，但这似乎适用于导航丸而不是导航栏。我还发现了一个我试图实现的 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 解决方案。

我尝试了这个 Whosebug answer 中的大部分解决方案，但无法让其中任何一个在 plunker 上工作。

Answer 1

你走在正确的轨道上：

每个列表元素的 isActive 函数需要传入与其 href 匹配的参数 - 因此在您给出的示例中，它应该是：

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

您还需要为 CSS 中的活动 class 添加样式。我不确定你是否已经这样做了，因为你提供的 plunkr 不完整。

在这里查看我的 Plunkr：http://plnkr.co/edit/zE6sXEn4wHJufOlnNeld

使用 AngularJS 在边栏上突出显示当前选项卡

Highlight current tab on sidebar using AngularJS

controller

sidebar

twitter-bootstrap

angularjs

twitter-bootstrap-3