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

Question

我已经在应用程序中实现了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>标记和文本，因此我可以确认模板已加载。

谁能告诉我为什么不加载模板？

Answer 1

似乎父模板programs.html的子模板丢失了。 确保此临时programs.html包含未命名的视图目标

<div ui-view="">

每个孩子都将插入其父母中。 如果我们希望子代替换父代，则必须使用绝对名称，在这种情况下，将index.html定位如下：

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

虽然这种命名约定可能很奇怪： views : { '@' : ... ，但这只是绝对名称：

视图名称-相对名称与绝对名称

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

因此，“ @”表示未命名状态下的未命名视图===根状态

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-08-11 10:45:56

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-08-11 10:45:56

解决方案1
3 已采纳 2015-08-11 10:45:56