嵌套 ui- 视图未被填充

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（在 body 标签的 div(ui-view) 中正确显示）

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>.

的 jade 文件的顶部

如果您想了解更多信息，这里有很多漂亮的 easy solutions。

更多详情

问题基本上归结为jade在输出

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

哪个angular看不懂。因此，您必须对输出进行一些更改，以便 angular 可以使用它。

选项 1

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

doctype html

在包含 <div ui-view> 的 jade 文件的顶部。即使您的 jade 文件包含在另一个已经具有 doctype html.

的文件中，您也必须这样做

选项 2

你可以写

.div(ui-view="")

而不是

div(ui-view)

强制jade输出<div ui-view>.

选项 3

Angular 如果您在 div:

上指定一个名为 ui-view 的 class 就可以了

<div class="ui-view">

选项 4

也许最骇人听闻的方法是像这样编写原始 HTML：

<div ui-view>

这使得 jade 的输出与您输入的完全一样。