javascript - AngularJS - 使用 ui-router 未显示嵌套 View

Question

我正在努力将我找到的一个项目升级到最新版本的 Angular，并准备将其进行 Angular 2 转换等。因此，我在 Angular 中使用 ui-router 来使用一些嵌套 View ，并且只有当嵌套 View 作为 ng-template 文件明确包含在 index 页面中时，我才能显示它们。

index.jade

script(type="text/ng-template", id="404")
    include partials/404
script(type="text/ng-template", id="home")
    include partials/home
script(type="text/ng-template", id="private/layout")
    include partials/private/layout
script(type="text/ng-template", id="private/home")
    include partials/private/home
script(type="text/ng-template", id="private/nested")
    include partials/private/nested
script(type="text/ng-template", id="private/nestedAdmin")
    include partials/private/nestedAdmin

app.routes.js

(function() {
  'use strict';

  angular
    .module('app.routes', [
      'ui.router'
    ])

  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    var access = routingConfig.accessLevels;

    // Public routes
    $stateProvider
        .state('public', {
            abstract: true,
            template: "<ui-view/>",
            data: {
                access: access.public
            }
        })
            .state('public.home', {
                url: '/',
                templateUrl: 'home'
            })
            .state('public.404', {
                url: '/404',
                templateUrl: '404'
            });

    // Regular user routes
    $stateProvider
        .state('user', {
            abstract: true,
            template: "<ui-view/>",
            data: {
                access: access.user
            }
        })
            .state('user.profile', {
                url: '/profile',
                templateUrl: 'profile',
                controller: 'profileController',
                controllerAs: 'vm'
            })

            .state('user.private', {
                abstract: true,
                url: '/private',
                templateUrl: 'private/layout'
            })
                .state('user.private.home', {
                    url: '/',
                    templateUrl: 'private/home'
                })
                .state('user.private.nested', {
                    url: '/nested',
                    templateUrl: 'private/nested'
                })

                .state('user.private.admin', {
                    url: '/admin',
                    templateUrl: 'private/nestedAdmin',
                    data: {
                        access: access.admin
                    }
                });

  });

})();

我想删除整个 ng-template 部分，因为我觉得这在扩展应用程序时效率不高，因此我删除了 ng-template 脚本索引页面。当我这样做时，第一层嵌套路由起作用，因此诸如 public.home 之类的路由可以正常工作。问题出在第二层嵌套 View 上，因此现在 user.private.home 和 user.private.nested 等路由不起作用，也不会显示。

以下是使用和不使用 ng-templates 脚本生成的 HTML:

使用 ng-templates 脚本

<div data-ui-view="" class="col-md-6 col-md-pull-4 ng-scope">
  <p class="ng-scope">Only visible to users</p>
</div>

没有 ng-templates

<div data-ui-view="data-ui-view" class="col-md-6 col-md-pull-4 ng-scope"></div>

有什么想法吗？

Answer 1

在这里找到我自己的答案:https://github.com/angular-ui/ui-router/issues/247

事实证明这是 Jade/ui-router 的问题，我不确定是哪个。解决方案是包含 ui-view使用纯 HTML <div ui-view></div>或通过放置 doctype html在部分文件的顶部。

这是一个令人困惑的问题，因为嵌套模板在注入(inject) $templateCache 时工作正常。使用ng-template如我的帖子所示。