好吧,所以我的命名视图在将内容加载到我的状态时遇到了问题。
它主要有问题,因为我真的不知道为什么它不起作用;angular通常意味着拼写错误,但我在一个plunker中重新创建了我的问题,并且得到了相同的结果,所以也许我遗漏了什么。
我知道以前有人问过这个问题::然而,在我在这里看到的所有结果中,人们都将内容放入抽象状态的孩子中。我想做的是有一个状态;用命名视图以及与该状态相关的其他内容填充它;然后让该状态的子级将内容加载到名为视图的主状态中。应该足够简单,相当直接,但遗憾的是,我的不会为我工作。
这是指向plunker的链接::http://plnkr.co/edit/TWCQuoIyJRvTb42Z7xxe?p=preview
正如您将看到的,主"文件"状态正在加载。但是,命名视图中的任何内容都没有从其子状态"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>
论文页面(应该加载嵌套视图的位置)
<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 : ''
存在一个已更新且正在工作的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'
}
}
})
有关这方面的更多详细信息,请参阅文档:
如何:设置默认/索引子状态
在这里查看
另一种方法可能是更改默认值:
$urlRouterProvider.otherwise('/papers/view');
并将url:'/view'添加到子状态:
...
.state( 'papers.views', {
url: '/view',
views: {
...
在此处检查此版本