navigate to nested named view with ui-router

Question

In app I have named view mainContent.

    <div class = "wrapper"
         ui-view = "mainContent">
    </div>

I have only one route for this view.

    $stateProvider
        .state("home",
        {
            url: "/home",
            views: {
                'mainContent': {
                    templateUrl: "app/home/home.html"
                }
            }
        });

I load home.html to named view mainContent view which has also named view appContent.

home.html

    <div class = "row"
         ui-view = "appContent">
    </div>

Routes for nested named view appContent are here.

    $stateProvider
        .state("request",
        {
            parent: "home",
            abstract: true,
            url: "/request"
        })
        .state("request.create", {
            url: "/create",
            views: {
                appContent: {
                    templateUrl: "app/requests/create/createRequest.html",
                    controller: "RequestController as vm"
                }
            }
        });

When I try load http://.../#/home/request/create RequestController is not created and also view createRequest.html is not loaded.

From view navigate to request.create state with :

<a ui-sref = "request.create"><i class = "fa fa-plus"></i>New</a>

Thank

You missed the `.` on the `state("home")`, it should be `.state("home")` — Shaohao, Nov 19 '15 at 15:14
@Shaohao Lin: I fixed it. It was only copy & paste problem. In code it’s correct. — Ninja.Turtle, Nov 19 '15 at 15:22

score 0 · Accepted Answer · answered Nov 19 '15 at 15:52

Your "request" state needs its own template an ui-view where you can open its child view

$stateProvider
    .state("home",
    {
        url: "/home",
        views: {
            'mainContent': {
                template: "<div class ='row' ui-view ='appContent'></div>"
            }
        }
    })
    .state("request",
    {
        parent: "home",
        abstract: true,
        url: "/request",
        views: {
            'appContent': {
                template: "<div class ='row' ui-view ='requestContent'></div>"
            }
        }
    })
    .state("request.create", {
        url: "/create",
        views: {
            'requestContent': {
                template: "<p>Create Request</p>"
            }
        }
    });

This works for me. Proof: http://jsfiddle.net/eD3MU/373/

thank for sample, I needed add named view also to abstract state — Ninja.Turtle, Nov 19 '15 at 22:01

navigate to nested named view with ui-router

1 Answers1