gpt4 book ai didi

angularjs - Angular ui 路由器 : Parent & Child Views

转载 作者:行者123 更新时间:2023-12-04 13:59:52 27 4
gpt4 key购买 nike

我想建立一个具有以下结构的站点 header-view, main-view, footer-view 。
所以我定义了一个包含页眉和页脚的根路由。 root 的 child 将成为我所有的站点。在这些站点中,我将拥有更多的嵌套 View 。

在下面的代码中,它确实显示了页眉,但不显示页脚和主 View 。一旦我删除了父继承,它就会显示主 View 而不是页眉和页脚。

HTML

<body ng-app="App">
<header ui-view="header"></header>
<main ui-view></ui-view>
<footer ui-view="footer"></footer>
</body>

JS
   module.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('root', {
abstract: true,
views: {
'@': {
controller: 'RootCtrl',
controllerAs: 'rootCtrl'
},
'header@': {
templateUrl: 'modules/header/header.html',
controller: 'HeaderCtrl',
controllerAs: 'headerCtrl'
},
'footer@': {
templateUrl: 'modules/footer/footer.html',
controller: 'FooterCtrl',
controllerAs: 'footerCtrl'
}
}
})
.state('root.home',{
parent:'root',
url:'',
templateUrl:'modules/home/home.html',
controller: 'HomeController',
controllerAs:'homeCtrl'
});
});

最佳答案

有一个链接到working plunker .
UI-Router如何为 View 找到目标/ anchor 的逻辑是:总是尝试插入 child进入 parent .如果不可能,则使用绝对命名。看:

View Names - Relative vs. Absolute Names

所以我改变的是,父未命名 View 现在包含 subview 的目标/ anchor - 未命名 View <ui-view /> :

.state('root', {
abstract: true,
views: {
'@': {
template: '<ui-view />', // NEW line, with a target for a child
controller: 'RootCtrl',
controllerAs: 'rootCtrl'
},
....

另外,因为我们说,默认 url 是
  $urlRouterProvider.otherwise('/home');

我们必须有这样的状态:
.state('root.home',{
parent:'root',
url:'/home', // this is the otherwise, to have something on a start up

查一下 here

使用 plunker here 的另一种方法, 可能是针对 child 中的根 View :
.state('root.home',{
parent:'root',
url:'/home',
views: {
'@': {
templateUrl:'home.html',
controller: 'HomeController',
controllerAs:'homeCtrl'
}
},

在这种情况下,父状态不必具有 <ui-view /> - 我们的目标是 root,但我们不会继承任何东西......为什么会这样?请参阅此链接:

Scope Inheritance by View Hierarchy Only

关于angularjs - Angular ui 路由器 : Parent & Child Views,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27312840/

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