如果我有带的index.html
<body>
<ui-view="home"></home>
</body>
然后在该主视图中，我使用以下内容渲染frame.html：
<div ui-view="home_content"></div>
在我的app.js中，我一直试图获得frame.html中最内部的ui-view，以呈现另一个html模板。我可以很好地渲染home视图中的内容，但home_content内部没有任何渲染。
我的app.js ui路由器代码
$stateProvider
.state('user', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.user
}
})
.state('user.home', {
url: '/home',
views: {
'home@': {
templateUrl: 'app/partials/home/frame.html',
controller: 'homeCtrl'
},
'home_content@home': {
templateUrl: 'app/partials/home/dashboard/index.html',
controller: 'dashboardCtrl'
}
}
});
看起来我可能完全错了，不确定上面的方法是否正确。
有一个工作的plunker
我想，你想在孩子中针对你父母的未命名视图，所以视图应该这样定义：
$stateProvider
// here we define parent
.state('user', {
abstract: true,
// parent has UNNAMED view
template: '<ui-view/>', // this will be injected into index.html
... // ui-view=""
})
// child will partilly target parent
// and also itself
.state('user.home', {
url: '/home',
views: {
// here we target parent UNNAMED view
'': {
...
},
// here we target current state
// so we should use state name
'home_content@user.home': {
...
}
}
});
同样有效的是，我们可以使用'@home' : {}来代替'' : { }（请参阅下面的文档）。
在这种情况下（如以下评论中所述），我们有index.html，目标名为home:
<div ui-view="home"></div>
我们可以使用这个plunker，它像这样重新定义父抽象状态：
$stateProvider
.state('user', {
abstract: true,
data: {
...
},
views : {
'home' : {
template: '<div ui-view=""></div>',
}
}
})
检查文档
视图名称-相对名称与绝对名称
在幕后，每个视图都会被分配一个绝对名称，该名称遵循
viewname@statename的方案，其中viewname是视图指令中使用的名称，state name是状态的绝对名称，例如contact.item。您还可以选择用绝对语法编写视图名称。例如，前面的例子也可以写成：
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
看起来您的孩子.state有错误的代码，应该是'home@home_content'而不是'home_content@home'
.state('user.home', {
url: '/home',
views: {
'': {
templateUrl: 'app/partials/home/frame.html',
controller: 'homeCtrl'
},
'home@home_content': {
templateUrl: 'app/partials/home/dashboard/index.html',
controller: 'dashboardCtrl'
}
}
});
您正在使您的状态配置变得复杂。只需将代码更改为如下所示：
$stateProvider.state('user', {
abstract : true,
template : '<ui-view/>',
data : {
access : AccessLevels.user
}
})
.state('user.home', {
url : '/home',
views : {
'home' : {
templateUrl : 'app/partials/home/frame.html',
controller : 'homeCtrl'
},
'home_content' : {
templateUrl : 'app/partials/home/dashboard/index.html',
controller : 'dashboardCtrl'
}
}
});
您实际上没有正确使用@，这是可选的。除非您有正确的视图路径，否则这应该有效。