AngularJS侧边栏链接在单击时保持活动状态

Question

我正在根据这个创建一个侧边栏

http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview从this 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 上工作。

Answer 1

您可以在$scope 中创建tab 属性，为其分配标签标识符，然后使用ng-class="{'active': tab==='tab1'}"

Answer 2

使用这个：

     <div class="sidebar" sidebar-directive="state" ng-init="item=-1">
        <a href="#" id="navigation-toggle" ng-click="toggleState()">Navigation</a>
        <ul class="navigation">
          <li class="navigation-items"> <a href="#" ng-click="item=0" ng-class="{'active':item==0}">Link1</a> 
          </li>
          <li class="navigation-items"> <a href="#"ng-click="item=1" ng-class="{'active':item==1}">Link2</a> 
          </li>
          <li class="navigation-items"> <a href="#" ng-click="item=2" ng-class="{'active':item==2}">Link3</a> 
          </li>
          <li class="navigation-items"> <a href="#" ng-click="item=3" ng-class="{'active':item==3}">Link4</a> 
          </li>
          <li class="navigation-items"> <a href="#" ng-click="item=4" ng-class="{'active':item==4}">Link4</a> 
          </li>
        </ul>
      </div>

查看链接：http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview