ui-router 为什么父状态必须是抽象的答案

【问题标题】：ui-router Why parent states must be abstractui-router 为什么父状态必须是抽象的
【发布时间】：2013-04-28 02:58:00
【问题描述】：

为什么父视图必须是抽象的才能渲染子视图（嵌套视图）？

$stateProvider
            .state('A', {url: '/A', abstract: true, templateUrl: 'views/A.html'})
            .state('A.B', {url: '', abstract: true, templateUrl: 'views/B.html'})
            .state('A.B.C', {url:'', abstract:false, templateUrl:'views/C.html'});

父视图“A”托管在 home.html 中，如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Yomingo</title>
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
</head>
<body>
    <div ui-view>
    </div>
<script type="text/javascript" data-main="scripts/main" src="lib/require/require.js"></script>
</body>
</html>

如果任何父状态“A”或“B”被标记为 abstract=false，则不会呈现 ui-view 内容。

【问题讨论】：

假设您的应用页面是 home.html 并且父视图 A 的模板确实位于 views/A.html... 您应该共享 views/A.html 和 views/B.html 所以我们可以看到子视图是如何被放置到父视图中的。

标签： angularjs angularjs-routing

【解决方案1】：

我也遇到过类似的问题。

您的三个州都使用相同的 URL，/A：

A：'/A'
A.B：'/A' + ''
A.B.C：'/A' + '' + ''

由于它们已定义 URL，因此将根据您当前的 URL 选择当前状态。您一次只能处于一种状态，因此可能选择的状态是第一个定义的状态。

如果您将 A 和 A.B 状态设为抽象状态，则它们无法转换，因此在您浏览到 /A 时不会被考虑。因此选择 A.B.C，继承 A.B 和 A。

如果您希望一次显示更多您的观点，那么我建议您阅读multiple named views 的文档，以便更容易跟踪。

【讨论】：