Ui-router Почему родительские состояния должны быть абстрактными
Почему родительские представления должны быть абстрактными, чтобы отображать дочерние представления (вложенные представления)?
$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 не отображается.
Ответы
Ответ 1
У меня были подобные проблемы.
Ваши три состояния используют один и тот же URL-адрес,/A:
- A: '/A'
- A.B: '/A' + ''
- A.B.C: '/A' + '' + ''
Поскольку у них есть определенные URL-адреса, текущее состояние будет выбрано на основе вашего текущего URL-адреса. Вы можете находиться только в одном состоянии за раз, поэтому, по-видимому, выбранное состояние является тем, которое определено первым.
Если вы делаете абстрактные состояния A и A.B, они не могут быть преобразованы и поэтому не будут учитываться при просмотре /A. Таким образом, A.B.C выбирается, наследуя от A.B и A.
Если вы хотите показать больше одного из своих просмотров за раз, я бы рекомендовал прочитать документы для нескольких именованных представлений, чтобы упростить отслеживание из.
