AngularJS侧边栏链接点击

创建基于关闭此一个

发现http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview的侧边栏但是我想保持积极的选择，一旦链接被点击保持活跃。我试着添加数据切换，但似乎适用于nav-pills而不是navbar。我还发现，我已经尝试实现的是，主动导航指令：

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的大部分解决方案，但无法让它们中的任何一个在重击器上工作。

来源

2016-03-14 jenryb

可以在$scope创建tab财产，分配给它一个标签标识，然后使用ng-class="{'active': tab==='tab1'}"

来源

2016-03-14 19:43:03

是的，我应该提到，我也试过这个。我创建了ng-class =“{active：isActive（'/ firstlink'）}”并创建了一个函数$ scope.isActive = function（viewLocation）{return viewLocation === $ location.path（）; };基于其他堆栈流的答案。这没有奏效。 – jenryb

这里是你正在建议，为那些看起来stackoverflow链接：http://stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs我只是不能让它与plunker – jenryb

使用本：

 <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

来源

2016-03-14 19:51:53 Sandeep

我不认为你附加了正确的Plunker，但我会尝试这种方法 – jenryb

它不适用于这个plunker：http://plnkr.co/edit/bUWo4RgpxhHYvyTo4Wol?p=preview – jenryb

你还需要添加**。** style.css **中的active **类如下所示：.active {background_color：＃222！important; } – Sandeep

AngularJS侧边栏链接点击

回答

相关问题