Angular routes & active links

Question

I'm trying to make selected link on navigation bar highlighted based on current location in the url. For that I have written following function in controller for navbar:

$scope.isActive = function(route) {
  return route === $location.path();
};

and in html I have this:

<li ng-class="{active: isActive('/admin')}"><a href="/admin">Admin</a></li>

This works well for simple url but does not perform well for urls with id and subpaths. I mean if I have url as 'item/:id' it does not match in isActive function and does not get highlighted, also I want to highlight same li for multiple sub routes like item menu should be highlighted for items & items/:id & items/my. Any idea how can I achieve this?

Please try this [answer](http://stackoverflow.com/a/26977126/1679310) where are explained all the details how **active** link could be solved with UI-Router... — Radim Köhler, Nov 28 '14 at 05:44
@RadimKöhler you are demonstrating `` tag but I want to change class for `
Just wanted to give you a hint, how the "standard" UI-Router soltuion was designed... ;) Because as far as I remeber (from my plays...) it could be applied on LI as well, just ui-sref must be in place... — Radim Köhler, Nov 28 '14 at 05:52
@RadimKöhler ok, I updated some bits here and there and now its working somewhat. Only problem is I can not directly go to abstract state. I mean I have given abstract state id into ui-sref so its getting highlighted everytime a child state is selected but when I click on that link it gives error like `Cannot transition to abstract state 'item'` — Harry Joy, Nov 28 '14 at 06:06
Yes yes... but that is not an issue! Why? just remove the abstract... and try to create some handling arround... to select one substate as default. Check it here http://stackoverflow.com/q/23658846/1679310 and in case you are using 0.2.13 - http://stackoverflow.com/q/27120308/1679310 — Radim Köhler, Nov 28 '14 at 06:07

score 0 · Accepted Answer · answered Nov 28 '14 at 05:48

0

try this

<li ng-class="{isActive('/admin')? 'active' : ''}"><a href="/admin">Admin</a></li>

or

$scope.getActiveClass = function(route) {
  return (route === $location.path())? 'active' : '';
};


//in directive
<li ng-class="getActiveClass ('/admin')"><a href="/admin">Admin</a></li>

answered Nov 28 '14 at 05:48

Антон Брагин

412
3
6

For simple routes its already working. I want to make it work for complex and sub routes. – Harry Joy Nov 28 '14 at 05:52
You can use regexp for sub routes – Антон Брагин Nov 28 '14 at 06:00

Angular routes & active links

1 Answers1