I have been working on building a dashboard that consists of an abstract state called dashboard, with subdashboard as the immediate child state.
https://i.sstatic.net/YTHky.png
Previously, clicking on user details would take the user to the dashboard.tables state. However, I encountered an issue where the li html element was not activating.
https://i.sstatic.net/LEv7a.png
Even though the state changes, the specific element under datatables does not become active.
https://i.sstatic.net/35GRk.png
In the image above, I manually opened the element to demonstrate my problem. Ideally, any click or change in state should activate the corresponding item in the side menu. Any assistance is highly appreciated
Here is the code snippet:
<li class="has_sub">
<a href="" class="waves-effect waves-light"><i class="md md-view-list"></i><span> Data Tables </span><span class="pull-right"><i class="md md-add"></i></span></a>
<ul class="list-unstyled">
<li ui-sref-active='{"active": "dashboard" }' ><a ui-sref="dashboard.tables">Tables</a></li>
</ul>
</li>
Below are my routes:
r.state("dashboard",{abstract:"true",templateUrl:"partials/dashboard.html"})
r.state("dashboard.subdashboard",{url:"/dashboard",templateUrl:"partials/subdashboard.html"})
r.state("dashboard.tables",{url:"/tables",templateUrl:"partials/tables.html"});
I tried implementing suggestions from LouieAlmeda without success. Additionally, I experimented with ng-class but it did not resolve the issue either.