gpt4 book ai didi

javascript - AngularJS - 在子状态中加载命名 View (非抽象)

转载 作者:行者123 更新时间:2023-11-28 00:32:47 25 4
gpt4 key购买 nike

好吧,我的命名 View 将内容加载到我的状态时遇到问题。

这主要是有问题的,因为我真的不知道为什么它不起作用; Angular 通常意味着一个拼写错误,但我在一个 plunker 中重新创建了我的问题,并且得到了相同的结果,所以也许我遗漏了一些东西。

我知道这个问题之前已经被问过::但是,在我在这里看到的所有结果中,人们将内容放入抽象状态的子级中。我想做的是拥有一个状态;用命名 View 以及与该状态相关的其他内容填充它;然后让子状态将内容加载到名为 View 的主状态中。应该足够简单且相当直接,但可惜我的方法对我不起作用。

这里是骗子制作的链接:: http://plnkr.co/edit/TWCQuoIyJRvTb42Z7xxe?p=preview

您将看到主要的“论文”状态正在加载。但是,命名 View 中的任何内容都不会从其子状态“papers.views”加载到“papers”状态。

引用代码:

模块声明和状态配置(app.js)

var app = angular.module( 'app', [ 'ui.router' ] );

app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/papers');
// States
$stateProvider
.state( 'papers', {
url: "/papers",
templateUrl: 'papers.html'
}) // nested paper state + views
.state( 'papers.views', {
views: {
'@papers': {
templateUrl: 'papers.home.html'
},
'paper1@papers': {
templateUrl: 'papers.paper1.html'
},
'paper2@papers': {
templateUrl: 'papers.paper2.html'
}
}
})
}
])
.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])

索引页(papers.html 在此处加载):

<body>
<div ui-view></div>
</body>

论文页面(应该加载嵌套 View )

<h1>This is the papers page. other views should load in here</h1>

<div ui-view ></div>
<div ui-view="paper1" ></div>
<div ui-view="paper2" ></div>

最佳答案

解决此问题的一种方法是添加两行:

  • 将您的父级更改为 abstract : true
  • 强制子级定义url:''

an upated and working plunker ,这是更新后的状态定义:

  $urlRouterProvider.otherwise('/papers');
// States
$stateProvider
.state( 'papers', {
// NEW LINE
abstract: true,
url: "/papers",
templateUrl: 'papers.html'
}) // nested paper state + views
.state( 'papers.views', {
// NEW LINE - because parent is abstract, same url here - this will be loaded
url: '',
views: {
'@papers': {
templateUrl: 'papers.home.html'
},
'paper1@papers': {
templateUrl: 'papers.paper1.html'
},
'paper2@papers': {
templateUrl: 'papers.paper2.html'
}
}
})

文档中有关此内容的更多详细信息:

<强> How to: Set up a default/index child state

检查一下here

另一种方法可能是更改默认值:

$urlRouterProvider.otherwise('/papers/view');

并将 url: '/view' 添加到子状态:

  ...
.state( 'papers.views', {
url: '/view',
views: {
...

检查这个version here

关于javascript - AngularJS - 在子状态中加载命名 View (非抽象),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28818006/

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