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

【问题标题】：Angular UI-Router Nested View Not Displaying PageAngular UI-Router嵌套视图不显示页面
【发布时间】：2015-08-11 10:44:25
【问题描述】：

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

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

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

    <!-- Footer -->

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

我的 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

因此，路线的行为似乎符合预期。唯一的问题是“programsComplete.html”模板没有显示，浏览器继续显示“programs.html”模板。

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

谁能告知为什么这不会加载模板？

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

似乎父模板 programs.html 只是缺少其子模板。确保这个模板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 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系方式。项目。您还可以选择以绝对语法编写视图名称。

所以'@'表示处于未命名状态的未命名视图 === 根状态

【讨论】：

感谢@radim，这引导我朝着正确的方向前进。我的问题是我对嵌套路由的工作方式感到困惑。原来我应该改用标准路线。
'@' 为我做到了！谢谢。