Nested Views and States Not showing

Question

In my app I have the root state named "app":

.state('app', {
    abstract: true,
    views: {
        'app': {
            templateUrl: 'prebuilt/views/pages/index.html',
            controller: 'MainController'
        }
    }
})

and its child "app.pages"

.state('app.pages', {
    abstract: true,
    views: {
        'custom@app': {
            templateUrl: 'prebuilt/views/templates/custom-styles.html'
        },
        'header@app': {
            templateUrl: 'prebuilt/views/layout/header.html'
        },
        'topBar@app': {
            templateUrl: 'prebuilt/views/layout/topbar.html'
        },
        'sideBar@app': {
            templateUrl: 'prebuilt/views/layout/sidebar.html'
        },
        'infoBar@app': {
            templateUrl: 'prebuilt/views/layout/infobar.html'
        },
        'contentSide@app': {
            templateUrl: 'prebuilt/views/layout/contentside.html'
        }
    }
})

And grand child "app.pages.dashboard"

.state('app.pages.dashboard', {
    url: '/',
    views: {
        '[email protected]': {
            templateUrl: 'prebuilt/views/index.html',
            controller: 'DashboardController'
        }
    },
    resolve: {
        loadCalendar: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load([
                'prebuilt/bower_components/fullcalendar/fullcalendar.js',
            ]);
        }]
    }
})

Now app loads an html view, inside that view are nested views which are/should be loaded when i navigate to "app.pages".

Now up to this point everything works just fine, however now I want to load a page in the content body of "app.pages", I've tried several times but the view never gets loaded:

This is a simplified version of my app.php:

<html>
  <head></head>
  <body>
   <div ui-view="app"></div>
  </body>
</html>

This is a simplified version of my index.html:

<div ui-view="header"></div>

<nav ui-view="topBar"></nav>

<div id="wrapper">
    <div>
        <di ui-view="sideBar">

        </div>
        <div>
            <div>
                <div>
                    <div class="col-md-9" ui-view="content">

                    </div>
                    <div class="col-md-3" ui-view="contentSide">

                    </div>
                </div> <!--wrap -->
            </div>
            <footer>
                <div class="clearfix">
                    <ul class="list-unstyled list-inline pull-left">
                        <li>&copy; 2015</li>
                    </ul>
                    <button><i class="fa fa-angle-up"></i></button>
                </div>
            </footer>
        </div>
    </div>
</div>

<div ui-view="infoBar"></div>

Radim Köhler · Accepted Answer · 2015-09-08 12:24:16Z

2

One issue is incorrect absolute naming here:

// NOT correct
.state('app.pages.dashboard', {
    url: '/',
    views: {
        // here is incorrect absolute name
        '[email protected]': {
            templateUrl: 'prebuilt/views/index.html',
            controller: 'DashboardController'
        }
    },
    ...

Because this is part of index.html, which is part of state 'app'

...
<div class="col-md-9" ui-view="content">
...

So the proper naming is just '...@app'

.state('app.pages.dashboard', {
    url: '/',
    views: {
        // CORRECT
        'content@app': {

answered Sep 8, 2015 at 12:24

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3718908x100 Over a year ago

Oh okay i think i get it now, so as long as the children use \@app, all the grandchildren will also use \@app because they are part of those views as well?

Radim Köhler Over a year ago

Exactly! ;) Enjoy mighty UI-Router

Collectives™ on Stack Overflow

Nested Views and States Not showing

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related