Menu
Why parent views have to be abstract in order to have child views (nested views) rendered?
$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'});
The parent view 'A' is hosted in home.html as follow:
<!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>
If any of the parent states 'A' or 'B' is marked as abstract=false the ui-view content is not rendered.
936
I've been having similar trouble.
Your three states are all using the same URL, /A:
As they have URLs defined, the current state will be chosen based on your current URL. You can only be in one state at a time, so presumably the state that is chosen is the one defined first.
If you make the A and A.B states abstract then they cannot be transitioned into and so will not be considered when you browse to /A. Thus A.B.C is chosen, inheriting from A.B and A.
If you are looking to show more that one of your views at a time then I would recommend reading the docs for multiple named views to make it easier to keep track of.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
