How can I get ui-router's ui-sref to point to a nested state?

Question

How can I get ui-router ui-sref to point to a URL

Here's my link:

<a ui-sref="admin.overview"</a>

and my configuration

var admin = {
    name: 'admin',
    url: '/admin',
    views: {
        'root': {
            templateUrl: '/Content/app/admin/partials/home.html',
        },
        'content': {
            templateUrl: '/Content/app/admin/partials/overview.html',
        },
    }
};

var adminContent = {
    name: 'admin.content',
    parent: 'admin',
    url: '/:content',
    views: {
        'root': {
            templateUrl: '/Content/app/admin/partials/home.html',
        },
        'content': {
            templateUrl: function (stateParams) {
                return '/Content/app/admin/partials/' + stateParams.content + '.html';
            },
        }
    }
};

$stateProvider.state(admin).state(adminContent)

This works if I point to a like with ui-sref='admin' but how can I get it to point to /admin/overview? or the link works if I code href="/admin/overview" myself? However the ui-sref doesn't create anything with the ui-sref="admin.overview".

Answer 1

Here is the documentation for ui-sref: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Essentially, you need to enter the desired state, and any parameters that you want to include. For your example, I think:

<a ui-sref="admin.content({ content: 'overview' })">Overview Page</a>