angularjs - 嵌套 ui-view 未填充

Question

我正在尝试让 ui-router 正确使用嵌套的 ui-view 元素，但在实际渲染嵌套 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 时相同/用户。

为什么嵌套的 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

如果你指定一个名为 ui-view 的类，Angular 就可以了。在您的div上:

<div class="ui-view">

选项 4

也许最黑客的方法是像这样编写原始 HTML:

<div ui-view>

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