nested ui-view not being populated

Question

I'm trying to get ui-router to properly work with nested ui-view elements but I'm having trouble getting the nested view to actually render. Here's my code:

app.js

'use strict';

var lunchrApp = angular.module('lunchr', ['ui.router', 'lunchrControllers']);

lunchrApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider.
            state('mainPage', {
                url: '/',
                templateUrl: '/partials/main.jade',
                controller: 'MainPageController'
            })
            .state('users', {
                url: '/users',
                templateUrl: '/partials/users.jade',
                controller: 'UserController'
            })
            .state('users.matching', {
                url: '/matching',
                templateUrl: '/partials/users.matching.jade'
            })
            .state('users.matched', {
                url: '/matched',
                templateUrl: '/partials/users.matched.jade'
            })
            .state('register', {
                url:'/register',
                templateUrl: 'partials/register.jade',
                controller: 'RegisterController'
            });
        $locationProvider.html5Mode(true);
    }]);

Here's /partials/users.jade (which gets properly displayed in the div(ui-view) in the body tag)

div(class='container')
    h1 Welcome

    p(ng-repeat='user in users').
        Username: {{user.email}}
        Firstname: {{user.firstname}} 
        Lastname {{user.lastname}}

    a(ui-sref='users.matching', class='btn btn-default') Start matching me!
    a(ui-sref='users.matched', class='btn btn-default') Simulate a match!
    div(ui-view)

Here are partials/users.matching.jade

div
    h1 We're matching you!

and partials/user.matched.jade

div
    h1 You've been matched!

I can successfully navigate to http://localhost:3000/users/matched but when I do, the html is identical to when I go to http://localhost:3000/users.

Why isn't the nested ui-view being correctly populated?

Answer 1

TL;DR

Just put

doctype html

at the top of the jade file that contains <div ui-view>.

If you want more info, there are a number of pretty easy solutions.

More details

The issue basically comes down to the fact that jade is outputting

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

which angular can't understand. So you have to make some changes to the output so it's something angular can consume.

Option 1

IMHO, the simplest option would be to put

doctype html

at the top of the jade file that contains <div ui-view>. You must do this even if your jade file is contained within another file that already has doctype html.

Option 2

You can write

.div(ui-view="")

instead of

div(ui-view)

This forces jade to output <div ui-view>.

Option 3

Angular will be fine if you specify a class named ui-view on your div:

<div class="ui-view">

Option 4

Maybe the hackiest way would be to write the raw HTML like this:

<div ui-view>

That makes jade output it exactly the way you typed it.