javascript - Angular ui-router - 嵌套 Controller - 如果子 Controller 处于相同状态，父 Controller 将启动两次

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中我有 subview 。基本上，父 Controller (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'
        }
    }
})

据我了解，带有空键的 View 将作为主状态的默认值加载。

这样做后，您的 main.html 模板将包含指向其他 ui-views 的指针，就像您对 parent 所做的那样其他页面。

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