Javascript UI路由器抽象状态子项不呈现

我很难理解UI路由器抽象状态是如何工作的。 事情是这样的： 我有一个index.html，它的

内只有一个

标记

有两种主要状态：着陆和应用（/Landing和/App）

着陆状态暂时没有问题，因为它只是一个静态文件（没有子视图等）

但是对于my/app状态，我需要一个涵盖整个应用程序的抽象父状态（需要解析每个子状态的用户配置文件）

问题是这个抽象状态的子视图也有子视图。而我不能让这些渲染

我的$stateProvider配置（简化）：

//着陆状态，这里没有问题
.州（‘登陆’{
url:“/landing”，
templateUrl:'landing.html'
})
//我抽象的父状态，有决心
.state（'根'{
url:“”，
摘要：没错，
模板：“”，
决心：{
当前用户：函数（UserFactory）{
返回UserFactory.initCurrentUserProfile（）；
}
}
})
//无法呈现视图标题和搜索栏的子级
.state（'root.app'{
url:“/app”，
templateUrl:'app.html'，
观点：{
“headerAndSearchbar”：{
templateUrl:“./partials/header/headerAndSearchbar.html”
}
}
})

app.html：

<div ui-view="headerAndSearchbar">     
</div>
<div>
    This is app.html     
</div>

这是app.html

请注意，如果我删除state root.app中的视图声明，我可以看到文本“This is app.html”。 headerAndSearchbar.html仅包含简单的html和css

有什么想法吗？我在这个问题上大发雷霆——我错过了什么？

有两个问题

首先，实际上在子

'root.app'

内部有两个视图

未命名（与templateUrl“app.html”相关的）

命名视图“headerAndSearchbar”

这意味着，这两个大部分都可以在

视图中声明：{}

设置：

.state('root.app', {
    url: '/app',
    //templateUrl: 'app.html',
    views: {
        '' : { templateUrl: 'app.html' },
        'headerAndSearchbar': { ... n
    }...

但这还不够

其次，我们需要对第二个（命名的）对象进行绝对命名，因为它与其父对象无关，而是与自身相关：

.state('root.app', {
    url: '/app',
    //templateUrl: 'app.html',
    views: {
        '' : { templateUrl: 'app.html' },
        // this is the same as a path to parent view 'headerAndSearchbar@root'
        // 'headerAndSearchbar': { ...
        // this means ... search in this state, inside of app.html
        'headerAndSearchbar@root.app': { ... 
    }...

查看这些以了解更多详细信息：

.state('root.app', {
    url: '/app',
    //templateUrl: 'app.html',
    views: {
        '' : { templateUrl: 'app.html' },
        // this is the same as a path to parent view 'headerAndSearchbar@root'
        // 'headerAndSearchbar': { ...
        // this means ... search in this state, inside of app.html
        'headerAndSearchbar@root.app': { ... 
    }...