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?
There is a working plunker
As stated in the doc:
...
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
