Question

我在我的应用程序中实现了UI-Router，但是我遇到了嵌套路由的问题。我的index.html页面看起来像;

<body>
    <!-- Navigation code -->

    <!-- Content from the template -->
    <div ui-view></div>

    <!-- Footer -->

    <!-- Application Scripts -->
</body>

My Angular ui-route代码是;

(function () {
    'use strict';

    var app = angular.module('rbApp', ['ngAnimate', 'ui.router', 'ui.bootstrap']);

    app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
        .state("home", {
            url: "/",
            templateUrl: "/App/WebSite/home.html",
            controller: "homeController as homeVm"
        })
        .state("programs", {
            url: "/programs",
            templateUrl: "/App/WebSite/programs.html",
            controller: "programsController as programVm"
        })
        .state("programs.complete", {
            url: "/complete",
            templateUrl: "/App/WebSite/programsComplete.html"
        })
        .state("articles", {
            url: "/articles",
            templateUrl: "/App/WebSite/articles.html",
            controller: "articleController as articleVm"
        })
    }]);

    app.run(['$rootScope', function ($rootScope) {
        $rootScope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {
            console.log('Location change: %s --> %s', oldUrl, newUrl);
        });
    }]);

})();

当我选择“程序”路线时，页面会正确显示，上面的“app.run”代码会更新控制台日志;

Location change: http://localhost:50321/#/ --> http://localhost:50321/#/programs

在程序页面上，我在锚标记中有一个图像，如下所示;

    <div class="col-md-3 hidden-sm hidden-xs">
        <a ui-sref="programs.complete"><img class="img-thumbnail img-responsive" src="/Images/Programs/Program01Small.jpg" /></a>
    </div>

单击图像时，将显示控制台日志;

Location change: http://localhost:50321/#/programs --> http://localhost:50321/#/programs/complete

因此看起来路线的行为符合预期。唯一的问题是“programComplete.html”模板未显示，浏览器继续显示“programs.html”模板。

我检查了控制台日志，但没有显示错误，目前“programsComplete.html”只包含<h1>标记和文字，因此我可以确认正在加载模板。

有人可以建议为什么不加载模板吗？

Answer 1

似乎父子模板 programs.html 刚刚失踪。请确保此tempalte programs.html包含未命名的视图目标

<div ui-view="">

每个孩子都插入其父母。如果我们想让孩子替换父母，我们必须使用绝对名称，在这种情况下，像这样定位index.html：

.state("programs.complete", {
    url: "/complete",
    views : {
      '@' : {
        templateUrl: "/App/WebSite/programsComplete.html"
       }
    }
})

虽然这个命名惯例可能很奇怪： views : { '@' : ... ，但它只是绝对名称：

View Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个绝对名称，该名称遵循viewname @ statename的方案，其中viewname是视图指令中使用的名称，状态名称是状态的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

所以'@'表示未命名状态的未命名视图=== root state

Angular UI-Router嵌套视图不显示页面

1 个答案: