Changing state of navigation in AngularJS UI-Router

Question

I have a relatively simple UI-Router set up, except that the navigation that changes states is itself a ui-view.

Main HTML:

<header class="container__header">
    <nav class="container__header__tabs" ui-view="nav"></nav>
</header>

Nav HTML:

<ul>
    <li class="nav-link active"><a ui-sref="/">all funds</a></li>
    <li class="nav-link"><a ui-sref=".something">something</a></li>
</ul>

The problem is that the .something link can't change state views on click.

My AngularJS config:

.state('home.something', {
        url: '/',
        views: {
            'nav': {templateUrl: 'templates/navs/explorer-nav.html'},
            'main': {templateUrl: 'templates/fund explorer/fund_explorer_all.html'}
        }       
});

This doesn't change the view templates (though the URL does change). Any ideas?

Don't remember this off the top of my head, but shouldn't you be navigating to home.something? — Artless
The URL does seem to change correctly, it's just the templates — BHouwens

Sarjan Desai Sarjan Desai · Accepted Answer · 2015-10-13T11:45:56

The issue is with <li class="nav-link"><a ui-sref=".something">something</a></li>

Here you have used state as .something which is not defined in config.

Change it to

<li class="nav-link"><a ui-sref="home.something">something</a></li>

It should be home.something which means state should be same as defined in config.

https://github.com/angular-ui/ui-router (Check - Nested States & Views)

Changing state of navigation in AngularJS UI-Router

1 Answers