0

I am creating a sidebar based off of this one

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

However I want to keep the selection active once the link is clicked. I've tried adding data-toggle, but that seems to work for nav-pills instead of navbar. I also found an is-active-nav directive that I've attempted to implement:

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');
                }
            });

        }
    };
}]);

That I call in the sidebar template like so: 

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

Another approach I tried is in my controller adding $scope.isActive = function (viewLocation) { return viewLocation === $location.path(); }; and then adding to the template: <li ng-class="{ active: isActive('/importinvoice')}"><a href="#/firstlink">First Link</a></li>

However, nothing I do will keep the sidebar elements highlighted after navigating to that page. I am trying to keep out of jQuery as I want it to be an AngularJS solution only.

I tried most of the solutions from this stackoverflow answer but can't get any of them to work on the plunker.

Community
  • 1
  • 1
jenryb
  • 2,017
  • 12
  • 35
  • 72

2 Answers2

0

You can create a tab property in $scope, assign it a tab identifier and then use ng-class="{'active': tab==='tab1'}"

Andrés Esguerra
  • 849
  • 5
  • 15
  • Yes, I should have mentioned that I tried this also. I created ng-class="{ active: isActive('/firstlink')}" and created a function $scope.isActive = function (viewLocation) { return viewLocation === $location.path(); }; based off of other stackflow answers. this did not work. – jenryb Mar 14 '16 at 19:46
  • Here is the stackoverflow link with what you are suggesting, for those looking: http://stackoverflow.com/questions/12295983/set-active-tab-style-with-angularjs I just can't get it to work with the plunker – jenryb Mar 14 '16 at 20:38
0

use this : 

     <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>

see link : http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview

Sandeep
  • 1,461
  • 13
  • 26