Login/Register
ui-router Why parent states must be abstract
Asked Answered
angularjsangularjs-routing
P

1

10

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.

Porter answered 3/5, 2013 at 16:19 Comment(1)
Let's assume that your app page is home.html and that parent view A's template really is at views/A.html... you should share views/A.html and views/B.html so we can see how the child views are being placed into the parent views. – Gamba
P
6

I've been having similar trouble.

Your three states are all using the same URL, /A:

  • A: '/A'
  • A.B: '/A' + ''
  • A.B.C: '/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.

Panoptic answered 17/7, 2013 at 10:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.