ui-router 子状态视图未显示

Question

我正在开发一个用于子状态的应用程序。制作子状态的目的是

1. 继承决心
2. 继承url base

当我导航到子状态时，父状态的视图和控制器被初始化。子控制器根本没有初始化，视图根本没有显示。我认为奇怪的一件事是子视图实际上是通过 XHR 加载的，但它似乎从未出现过。

如何使子状态的视图出现，并且子状态的控制器使用父状态的解析进行初始化？

.state('restaurant', {
    url: "/{city:[a-zA-ZåäöÅÖÄ]{2,}}/{restaurantUrl:[a-zA_ZåäöÅÄÖ\-]{2,}}",
    views: {
        "main": {
            templateUrl: "/views/restaurant.html",
            controller: "RestaurantCtrl",
            resolve: {
                restaurant: function($q, $stateParams, RestaurantsSrvc) {
                    /*Some stuff going on that returns a promise*/
                }
            }
        }
    }
})
.state('restaurant.checkout', {
    url: "/checkout",
    views: {
        "main": {
            templateUrl: "/views/checkout.html",
            controller: "CheckoutCtrl"
        }
    }
})

Answer 1

将<div ui-view="main"></div> 添加到restaurant.html。在父模板之外填充ui-view 元素显然是不可能的。

还要确保每个带有子状态的模板有一个ui-view。当您只有一个地方可以插入子模板时，不要使用命名视图，它们适用于需要同时显示多个子视图的情况。 documentation 中的草图很好地说明了这个用例。

另请注意，默认情况下，当子状态处于活动状态时会显示父视图，因为子状态的 ui-view 在父模板中。如果您需要隐藏父内容（或只是其中的一部分），请使用ng-hide 和$state 服务，如this answer 所示。