I have implemented UI-Router in my application but I'm having a problem with a nested route. My index.html page looks like;

我在我的应用程序中已经实现了UI-Router，但是我有一个嵌套路由的问题。我的指数。html页面的样子;

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

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

    <!-- Footer -->

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

My Angular ui-route code is;

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

因此，看来这些线路的表现与预期相符。唯一的问题是“程序完成”。html模板未显示，浏览器继续显示“程序”。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“只包含

标签和文本，因此我可以确认模板正在加载。

Can anyone advise why this would not be loading the template?

有人能告诉我为什么它不会加载模板吗?

1 个解决方案

#1

It seems that the parent template programs.html is just missing for its child. Be sure that this tempalte programs.html contains unnamed view target

似乎父模板程序。html只是缺少了它的子元素。确保这个tempalte程序。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:

每个子元素都被插入到父元素中。如果我们想要子节点替换父节点，我们必须使用绝对名，在这种情况下，我们要以索引为目标。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:

虽然这种命名约定可能很奇怪:视图:{'@':…，它只是一个绝对的名字:

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, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

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

so '@' means unnamed view in the unnamed state === root state

所以“@”表示未命名状态=== =根状态下的未命名视图

#1