gpt4 book ai didi

javascript - Angular UI-Router嵌套 View 不显示页面

转载 作者:行者123 更新时间:2023-11-29 19:23:37 25 4
gpt4 key购买 nike

我已经在我的应用程序中实现了 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

在程序页面上,我在 anchor 标记内有一个图像,如下所示;

    <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>标记和文本,以便我可以确认正在加载模板。

谁能告诉我为什么这不会加载模板?

最佳答案

它的子模板似乎缺少父模板 programs.html。确保此模板 programs.html 包含未命名的 View 目标

<div ui-view="">

每个 child 都被插入到其 parent 中。如果我们想让 child 替换 parent ,我们必须使用绝对名称,在这种情况下,像这样定位 index.html:

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

虽然这个命名约定可能很奇怪: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, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

所以'@'表示未命名状态下的未命名 View ===根状态

关于javascript - Angular UI-Router嵌套 View 不显示页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31939630/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com