Question

我正在努力升级我找到最新版Angular的项目，并为Angular 2转换做好准备。所以，我使用ui-router在Angular中使用了一些嵌套视图，如果index页面明确包含ng-template个文件，我只能显示嵌套视图。

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页面删除了index脚本。当我这样做时，第一层嵌套路由起作用，因此public.home之类的路由可以正常工作。第二层嵌套视图会出现问题，因此现在user.private.home和user.private.nested等路由无法正常工作且无法显示。

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

WITH ng-templates scripts

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

WITHOUT 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的一个问题，我不知道哪个。解决方案是使用纯HTML ui-view包含<div ui-view></div>，或将doctype html放在部分文件的顶部。

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

AngularJS - 未显示使用ui-router的嵌套视图

1 个答案: