Highlight current menu using AngularJS

Question

I am using the following code:

<li class="sidebar-list-item"><a ng-class="getClass('/dashboardHome')" href="/dashboardHome" class="sidebar-link text-muted"><i class="o-home-1 mr-3 text-gray"></i><span>Home</span></a></li>


$scope.getClass = function (path) {
        console.log("Path: "+path);
        return ($location.path().substr(0, path.length) === path) ? 'active' : '';
      }

On console I am getting : Path: /dashboardHome

But not its not working.

mahan · Accepted Answer · 2019-03-07 10:53:32Z

1

Do like this if you use ui-sref.

ui-sref-active="active" ui-sref="home.dashboard.dashboardHome"

You do not need to use ng-class and getClass function.

Update

ui-sref-active-eq:

The ui-sref-active-eq directive applies the CSS class when the ui-sref/ui-state's target state is directly active (not when child states are active). This is an "exact match" which uses StateService.is. -ui-router.github.io

If you do not want to activate the parent route when a child route is active, use ui-sref-active-eq="active" for the parent route.

edited Mar 7, 2019 at 10:53

answered Mar 7, 2019 at 7:37

mahan

15.4k9 gold badges69 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Highlight current menu using AngularJS

1 Answer 1

Update

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

Comments

Linked

Related