部分页面作为 Angular 中的子视图

2022-01-21 00:00:00 angularjs javascript angular-ui-router

我有以下问题要解决:

从本地菜单(左侧菜单)中，我可以选择子页面.典型场景.现在我想重新加载与本地菜单项相关的内容.在纯 Angular 中，我不知道实现它的标准简单方法.我可以手动从服务器获取标记并手动替换内容区域.有没有更好的办法?我google了一下，发现了

From within local menu (menu on the left) I can choose sub pages. Typical scenario. And now I would like to relaod content associated with local menu item. In pure Angular I don't know a standard easy way to achieve it. I could get markup from the server manually and replace the content area manually. Is there a better way? I googled and came across

https://github.com/angular-ui/ui-router

在我开始深入研究细节之前，也许您可​​以建议如何解决这个问题.甚至建议我是否可以使用 ui-router 解决此问题.

Yet before I start delving into details perhaps you could advice how to solve this problem. Or even advice if I can solve this issue with ui-router.

推荐答案

你想在 ui-router 中使用嵌套状态.像这样的

You want to use nested states in with ui-router. Something like this

$stateProvider
    .state('home', {
            templateUrl: 'views/home.html',
            url: '/home',
            controller: 'homeCtrl'
        })
    .state('home.localmenu1', {
        templateUrl: 'views/localmenu1.html',
        url: '/home/local1',
        controller: 'local1Ctrl'
    })
    .state('home.localmenu2', {
        templateUrl: "views/localmenu2.html",
        url: '/home/local2',
        controller: 'local2Ctrl'
    })
    .state('products', {
        templateUrl: 'views/products.html',
        url: '/products',
        controller: 'productsCtrl'
    })

因此，您可以在views/home.html"中放置一个带有 ui-view 指令的元素.然后这个元素将包含子状态的视图(home.localmenu1、home.localmenu2).

So inside your "views/home.html" you can put an element with the ui-view directive. Then this element will contain the views of the sub-states (home.localmenu1, home.localmenu2).

相关文章