在 ui-router 中，是否可以在嵌套视图中包含嵌套视图？

Question

我正在使用 ui-router 进行路由选择，并且有一个嵌套视图可以加载所选项目的一些菜单选项。我的问题是，是否可以使用 ui-router 在嵌套视图中包含嵌套视图？

此处的代码有效：

.state('settings', {
    url: '/settings',
    views: {
        '': {
            templateUrl: './templates/settings.html',
            controller: 'settingsCtrl'
        },
        'details@settings': {
           templateUrl: './templates/details.html',
           controller: 'detailCtrl' 
        }
    }
})

但是说我想加载附加到 details@settings 视图的东西。我该怎么做？我试过了

.state('settings', {
    url: '/settings',
    views: {
        '': {
            templateUrl: './templates/main/settings.html',
            controller: 'settingsCtrl'
        },
        'detail@settings': {
            url: '',
            views: {
                '': {
                    templateUrl: './templates/detail.html',
                    controller: 'detailCtrl'                            
                },
                'contact@detail@settings': {
                    templateUrl: './templates/contactpref.html'
                }
            }
        }
    }
})

我在控制台中没有收到任何关于此的错误，但它确实破坏了我原来的嵌套视图。根据我的发现，文档并不清楚这是否可能。

Answer 1

这是不可能的。检查：http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider

和部分 views:

an optional map<string, object> which defined multiple views, or targets views manually/explicitly.

Examples:

Targets three named ui-views in the parent state's template

views: {
  header: {
    controller: "headerCtrl",
    templateUrl: "header.html"
  }, body: {
    controller: "bodyCtrl",
    templateUrl: "body.html"
  }, footer: {
    controller: "footCtrl",
    templateUrl: "footer.html"
  }
}

就是这样。这就是 UI-Router 将为我们看到和解决的问题。为什么没有向您提供任何错误信息？

因为 map<string, object> 的预期值为 object。它针对已知属性进行迭代 (controller, templateUrl) - 并且任何未知的都将被忽略、未使用、未找到...跳过

解决方案：

经过一些 UI-Router 的体验后，我建议：

如果有一些相关的功能 - 将它们置于状态
如果有更多相关的功能，但仅在某些条件下 - 将它们置于子状态。

该结构将带来很多好处，主要是：稳定的父级（不总是重新加载）和动态的子级 - 每当参数更改时将新的和新的内容放入某些 targets/anchors/ui-views 中。检查：

在 ui-router 中，是否可以在嵌套视图中包含嵌套视图？

In ui-router, is it possible to have nested views within nested views?

angularjs

angular-ui-router