Problems with nested views using angular-ui-router

Question

I have the following code in my app.js:

$stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'app/login/login.html'
        })
        .state('admin', {
            url: '/admin',
            templateUrl: 'app/admin/layout/layout.html',
            abstract: true
        })
        .state('admin.dashboard', {
            url: '',
            templateUrl: 'app/admin/dashboard/dashboard.html'
        })
        .state('admin.client', {
            url: '/client',
            templateUrl: 'app/admin/client/client.html',
            controller: 'ClientController',
        })
        .state('admin.client.new', {
            url: '/client/new',
            templateUrl: 'app/admin/client/new.html',
            controller: 'ClientController',
        })

Then, on layout.html I have this:

<section class="content" ui-view></section>

Which loads the admin.dashboard by default. And from there I have a link to load the admin.client

It's fine. But the problem comes in my client.html. I got the following:

<a ui-sref=".new">
     <button class="btn btn-app">
         <i class="ion ion-plus"></i> New Client
     </button>
</a>

What I expect it to do is to change the ui-view in layout.html from client/client.html to client/new.html but nothing happens.

If I add an ui-view tag inside client.html then the new.html is loaded there. But I need it to load on ui-view of layout.html.

Answer 1

If you use the attribute ui-view without specifying view name like ui-view="myviewname", stateProvider is matching the view hierarchy (the nested ui-view attributes) to your state hierarchy. So its expecting to find the target ui-view in client.html, like you found out yourself.

Change the state name 'admin.client.new' to 'admin.newclient', and your ui-sref link to 'admin.newclient'. Maybe that's what you want.

Answer 2

StrangeLoop's answer worked but I found a better solution.

I added the parent parameter to the new client state. Now it looks like:

.state('admin.client.new', {
    parent: 'admin',
    url: '/client/new',
    templateUrl: 'app/admin/client/new.html',
    controller: 'ClientController',
})

And on client.html:

<a ui-sref="admin.client.new">
    <button class="btn btn-app">
        <i class="ion ion-plus"></i> Novo Cliente
    </button>
</a>