使用 ui-router 导航到嵌套的命名视图

Question

在应用程序中，我将视图命名为 mainContent。

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

此视图我只有一条路线。

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

我将 home.html 加载到命名视图 mainContent 视图，该视图还命名了视图 appContent。

home.html

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

嵌套命名视图 appContent 的路由在这里。

    $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"
                }
            }
        });

当我尝试加载 http://.../#/home/request/create 时，没有创建 RequestController，也没有加载视图 createRequest.html。

从视图导航到 request.create 状态：

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

感谢

Answer 1

您的 "request" 状态需要自己的模板和 ui-视图，您可以在其中打开其子视图

$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>"
            }
        }
    });

这对我有用。证明：http://jsfiddle.net/eD3MU/373/

使用 ui-router 导航到嵌套的命名视图

navigate to nested named view with ui-router

javascript

angularjs

nested-views

angular-ui-router