angular ui-router - 嵌套控制器 - 如果子控制器处于相同状态，则父控制器启动两次

Question

.state('home', {
    url: '/home',
    views: {
        'main': {
            templateUrl: './main.html',
            controller: 'mainController'
        },
        'parent@home': {
            templateUrl: './parent.html',
            controller: 'parentController'
        },
        'child@home':{
            templateUrl: './child.html',
            controller: 'childController'
        },
        'otherPage@home': {
            templateUrl: './other-page.html',
            controller: 'otherController'
        }
    }
})

在 parent.html 我有子视图。基本上，父控制器（parentController）在此设置中启动了两次。如果我删除 child@home 状态，则 parentController 仅启动一次。我做错了什么，有没有更好的方法来定义这些状态？

index.html

<div class="maincontent" ui-view="main"></div>

main.html

<div class="maincontent container-fluid" ui-view="parent"></div>
<div class="maincontent container-fluid" ui-view="otherPage"></div>

parent.html

<div ui-view="child"></div>

Answer 1

像这样重新定义状态：

.state('home', {
    url: '/home',
    views: {
        '': {
            templateUrl: './main.html',
            controller: 'mainController'
        },
        'parent@home': {
            templateUrl: './parent.html',
            controller: 'parentController'
        },
        'child@home':{
            templateUrl: './child.html',
            controller: 'childController'
        },
        'otherPage@home': {
            templateUrl: './other-page.html',
            controller: 'otherController'
        }
    }
})

根据我的理解，带有空键的视图将作为主状态的默认值加载。

通过这种方式，您的main.html 模板将包含指向其他ui-views 的指针，就像您对parent 和otherPage 所做的那样。

我无法对此进行测试，因为我不在我的开发 PC 上，但我认为它应该可以工作，因为它是我的几个 AngularJS 项目中遵循的格式。