嵌套的ui-view未被填充

Question

我正在尝试让ui-router正确使用嵌套的ui-view元素，但我无法让嵌套视图实际渲染。这是我的代码：

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);
    }]);

此处为/partials/users.jade（div(ui-view)标记中的body正确显示

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)

以下是partials/users.matching.jade

div
    h1 We're matching you!

和partials/user.matched.jade

div
    h1 You've been matched!

我可以成功导航到http://localhost:3000/users/matched，但是当我这样做时，html与我去http://localhost:3000/users时相同。

为什么嵌套的ui-view没有正确填充？

Answer 1

TL; DR

刚刚放

doctype html

位于包含<div ui-view>的玉文件的顶部。

如果您想了解更多信息，可以使用一些漂亮的easy solutions。

更多细节

这个问题基本上归结为玉正在输出

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

哪个角度无法理解。因此，您必须对输出进行一些更改，以便角度可以消耗。

选项1

恕我直言，最简单的选择就是放

doctype html

位于包含<div ui-view>的玉文件的顶部。即使您的jade文件包含在已有doctype html的其他文件中，您也必须这样做。

选项2

你可以写

.div(ui-view="")

而不是

div(ui-view)

这迫使玉输出<div ui-view>。

选项3

如果您在ui-view上指定名为div的类，则Angular将会正常：

<div class="ui-view">

选项4

也许最讨厌的方法就是写这样的原始HTML：

<div ui-view>

这使得玉石的输出方式与您输入的方式完全相同。