CODEWITHSUNDEEP
angularjsangular-ui-router
Harry
Harry

Reputation: 3205

How to toggle ui-sref active/inactive link ui-router

Consider the following:

   <ul>
        <li id="dashboard" data-ui-sref-active="selected">
            <a data-ui-sref="home">Dashboard</a>
        </li>
<li id="jobs" data-ui-sref-active="selected">
        <a data-ui-sref="home.foo">Foos</a>
        <ul>
            <li data-ui-sref-active="selected">
                <a data-ui-sref="home.foo.foo1">Foo 1 list</a>
            </li>
            <li data-ui-sref-active="selected">
                <a data-ui-sref="home.foo.foo2">Foo 2 list</a>
            </li>
        </ul>
    </li>
</ul>

Problem is if the user currently click on another link, this "Dashboard" link state is still active.

How can I toggle the state active/inactive for Dashboard when user clicks it or clicks another link

Update:

I have tried this ui-sref-active-eq and it does work, however I cannot set this state back to active

Upvotes: 1

Views: 1056

Answers (1)

CozyAzure
CozyAzure

Reputation: 8478

That is because you are at child state of your home state, and thus it will always be active.

Use ui-sref-active-eq instead

According to the docs:

Will activate when the ui-sref's target state or any child state is active. If you need to activate only when the ui-sref target state is active and not any of it's children, then you will use ui-sref-active-eq

Edit: Added in Plnkr for reference.

Upvotes: 1

Related Questions