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

Mih*_*i H 10 angularjs angularjs-routing

为什么父视图必须是抽象的才能呈现子视图(嵌套视图)?

$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'});
Run Code Online (Sandbox Code Playgroud)

父视图"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>
Run Code Online (Sandbox Code Playgroud)

如果任何父状态'A'或'B'被标记为abstract = false,则不呈现ui-view内容.

And*_*ger 6

我一直遇到类似的麻烦.

您的三个州都使用相同的网址,/ A:

  • :'/ A'
  • AB:'/ A'+''
  • ABC:'/ A'+''+''

由于他们定义了URL,因此将根据您当前的URL选择当前状态.您一次只能处于一种状态,因此可能选择的状态是首先定义的状态.

如果将A和AB状态设为抽象,则它们无法转换为,因此当您浏览到/ A时将不会考虑它们.因此选择ABC,继承自AB和A.

如果您希望一次显示更多的一个视图,那么我建议您阅读多个命名视图的文档,以便更容易跟踪.