1

我正在学习如何使用 angular-ui/ui-router。到目前为止，我已经设置了以下内容：

var home = {
    name: 'home',
    url: '/home',
    views: {
        'nav-sub': {
            templateUrl: '/Content/app/home/partials/nav-sub.html',
        }
    }
};
var homeOverview = {
    name: 'home.overview',
    parent: 'home',
    url: '/overview',
    views: {
        'grid@': {
            templateUrl: '/Content/app/home/partials/overview.html',
            controller: 'HomeOverviewController',
        }
    }
}

这有效并显示了一个填充我的屏幕的概述页面。

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x                                                          x
x                                                          x
x                                                          x
x                                                          x
x                                                          x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

现在我想做的是在这个页面上有一个动态分配的区域，它根据 URL 的第三部分从数据库中获取内容。因此，我的概览页面中的 URL 为 /home/overview/1234 的链接将获得一个页面并显示：

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x                                   x                      x
x  Page Links                       x                      x
x                                   x                      x
x  1234                             x                      x
x  12                               x  Page 1234           x
x                                   x                      x
x                                   x                      x
x                                   x                      x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

有人可以建议我怎么做吗？我只是在寻找一些高水平的建议，并希望得到任何帮助。

4

1 回答 1

2

您将为

var homeOverview = {
    name: 'home.overview',
    parent: 'home',
    url: '/overview',
    views: {
        'grid@': {
            templateUrl: '/Content/app/home/partials/overview.html',
            controller: 'HomeOverviewController',
        }
    }
}

像这样

var homeOverViewItem={
    name: 'home.overview.item',
    parent: 'home.overview',
    url: '/:id',
    views: {
        'grid@': {
            templateUrl: '/Content/app/home/partials/overviewItem.html',
            controller: 'HomeOverviewItemController',
        }
    }
}

overview.html在某个地方的主视图中，您将定义ui-view将从 .html 插入的模板 html 的标签overviewItem.html。在此处查看一些示例https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

于 2013-08-30T10:59:52.933 回答