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

Question

I have implemented UI-Router in my application but I'm having a problem with a nested route. 我已经在应用程序中实现了UI-Router，但是嵌套路由存在问题。 My index.html page looks like; 我的index.html页面看起来像；

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

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

    <!-- Footer -->

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

My Angular ui-route code is; 我的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);
        });
    }]);

})();

When I select the "programs" route the page is displayed correctly and the "app.run" code above updates the console log with; 当我选择“程序”路由时，页面将正确显示，并且上面的“ app.run”代码将更新控制台日志；

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

On the programs page I have an image within an anchor tag as follows; 在程序页面上，我在锚标记中有一个图像，如下所示；

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

When the image is clicked the console log displays; 单击该图像后，将显示控制台日志。

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

So it appears the routes are behaving as expected. 因此，看来路线表现如预期。 The only problem is the "programsComplete.html" template is not displayed, the browser continues to display the "programs.html" template. 唯一的问题是未显示“ programsComplete.html”模板，浏览器继续显示“ programs.html”模板。

I have checked the console log but no errors are displayed and currently the "programsComplete.html" only contains a <h1> tag and text so I can confirm the template is being loaded. 我已经检查了控制台日志，但未显示任何错误，并且当前“ programsComplete.html”仅包含<h1>标记和文本，因此我可以确认模板已加载。

Can anyone advise why this would not be loading the template? 谁能告诉我为什么不加载模板？

Answer 1

It seems that the parent template programs.html is just missing for its child. 似乎父模板programs.html的子模板丢失了。 Be sure that this tempalte programs.html contains unnamed view target 确保此临时programs.html包含未命名的视图目标

<div ui-view="">

Each child is inserted into its parent. 每个孩子都将插入其父母中。 In case we want child to replace parent, we have to use absolute name, and in this case target the index.html like this: 如果我们希望子代替换父代，则必须使用绝对名称，在这种情况下，将index.html定位如下：

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

while this naming convention could be weird: views : { '@' : ... , it is just absolute name: 虽然这种命名约定可能很奇怪： views : { '@' : ... ，但这只是绝对名称：

View Names - Relative vs. Absolute Names 视图名称-相对名称与绝对名称

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, eg contact.item. 在幕后，为每个视图分配一个绝对名称，该绝对名称遵循viewname @ statename的方案，其中viewname是视图指令中使用的名称，状态名称是该州的绝对名称，例如contact.item。 You can also choose to write your view names in the absolute syntax. 您还可以选择以绝对语法编写视图名称。

so '@' means unnamed view in the unnamed state === root state 因此，“ @”表示未命名状态下的未命名视图===根状态

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