UI-Router 抽象状态 child 不呈现

Question

我在理解 UI-Router 抽象状态的工作原理时遇到了一些困难。事情是这样的：我有一个 index.html，其 <body>.

中只有一个 <ui-view> 标签

主要有两种状态：Landing 和 App（/landing 和 /app）。

目前登陆状态没有问题，因为它只是一个静态文件（没有 child 视图等）。

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

问题是这个抽象状态的child也有sub-view。我无法渲染这些。

我的 $stateProvider 配置（简化）：

//landing state, no problem here
.state('landing', {
    url: '/landing',
    templateUrl: 'landing.html'
})
// my abstract parent state, with the resolve
.state('root', {
    url: '',
    abstract: true,
    template: "<div ui-view></div>",
    resolve: {
        current_user: function (UserFactory) {
            return UserFactory.initCurrentUserProfile();
        }
    }
})

// the child which cannot render the view headerAndSearchbar
.state('root.app', {
    url: '/app',
    templateUrl: 'app.html',
    views: {
        'headerAndSearchbar': {
            templateUrl: './partials/header/headerAndSearchbar.html'
        }
    }
})

app.html :

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

请注意，如果我删除状态 root.app 中的 views 声明，我可以看到文本 "This is app.html"。 headerAndSearchbar.html 只包含简单的 html & css

有什么想法吗？我为此大发雷霆-我错过了什么？

Answer 1

有两个问题。

首先，child'root.app'里面其实有两个视图。

未命名（与templateUrl 'app.html'相关的那个）
命名视图'headerAndSearchbar'

这意味着，两者大多数都在 views : {} 设置中声明：

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

但这还不够。

其次，第二个（命名）我们需要绝对命名，因为它与其parent无关，而是与其自身有关：

.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': { ... 
    }...

检查这些以获取更多详细信息：

Angularjs ui-router not reaching child controller
Angular UI Router - Nested States with multiple layouts

UI-Router 抽象状态 child 不呈现

UI-Router abstract state child doesnt render

javascript

routes

angularjs

angular-ui

angular-ui-router