UI-Router is not compiling deep levels of templates

Question

I'm having problem building a nested template using UI-Router. It seems it is unable to load or compile templates in the third level (or deeper).

I've created a plunker with a simplified example, this is the code:

angular.module('plunker', ["ui.router"])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise("/");
    $locationProvider.html5Mode(false).hashPrefix('!');
    $stateProvider
    .state('home', {
        url: "/",
        controller: 'MainCtrl',
        views: {
            'main': {
                template: 'Main content'
             },
            'secondary': {
                templateUrl: "view2.html",
                views: {
                    'hot': {
                         template: 'hot content'
                     },
                     'cold': {
                         template: 'cold content'
                     }
                 }
            }
         }
    })

})
.controller('MainCtrl', function($scope) {
    $scope.sayHello = 'Hello';
})

where the html is

<body class='container' ng-controller='MainCtrl'>
    <h2>Nested template proof</h2>
    <div ui-view>
        <p>{{sayHello}}</p>
        <div ui-view="main"></div>
        <div ui-view="secondary"></div>
    </div>
</body>

and view2.html is

<div>
    <p>view2 loaded</p>
    <div ui-view="hot"></div>
    <div ui-view="cold"></div>
</div>

can any one tell me what I'm doing wrong? the 'hot' and 'cold' sections are not being compiled.

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

There is an updated and working example

The nesting of views inside one state must be done differently. We would need absolute naming - so this would be the syntax:

.state('home', {
    url: "/",
    controller: 'MainCtrl',
    views: {
        'main': {
            template: 'Main content'
         },
        'secondary': {
            templateUrl: "view2.html",
            //views: {}
        },
        'hot@home': {
             template: 'hot content'
         },
         'cold@home': {
             template: 'cold content'
         }
     }
})

This is the absolute view naming, discussed e.g. here:

edited May 23 '17 at 11:58

Community

1
1

answered Oct 31 '15 at 09:33

Radim Köhler

122,561
47
239
335

Many thanks, although this means that in a more complex scenario, I can't add a template with sub-templates to a view without knowing exactly what that template contains and without unpacking its content in the parent context. It doesn't look nice for my eyes. – Gaetano L Oct 31 '15 at 11:14
We can do a lot. These link shows some ideas about layouting http://stackoverflow.com/q/28800644/1679310. Hope it helps. Enjoy mighty UI-Router – Radim Köhler Oct 31 '15 at 12:55

UI-Router is not compiling deep levels of templates

1 Answers1