CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
ST80
ST80

Reputation: 3903

angular UI-Router: ui-sref-active on child element

How can I give an child element of an ui-sref anchor the ui-sref-active class?

I tried to do this in my menu on all anchors:

<a ui-sref="some.route">
    <h2 ui-sref-active="selected">CLICK HERE</h2>
</a>

but it doesn't work. I'm new to Angular, so could someone maybe tell me what I'm doing wrong?

Upvotes: 1

Views: 596

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

There is a working plunker

As stated in the doc:

ui-sref-active

...
ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used.
...

we need the parent (or current) element. So this will work:

<li ui-sref-active="selected">
    <a ui-sref="home">home</a></li>
<li ui-sref-active="selected">
    <a ui-sref="parent">parent</a></li>
<li  ui-sref-active="selected">
    <a ui-sref="parent.child">parent.child</a></li>

Check it in action here

Upvotes: 1

Related Questions