UI-Router抽象状态子级不渲染

debugcn 发表于 Dev

努佐布

我在理解UI-Router抽象状态的工作方式时遇到了一些困难。事情是这样的：我有一个index.html，<ui-view>里面只有一个标签<body>。

有两个主要状态：着陆和应用程序（/ landing和/ app）。

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

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

问题是这种抽象状态的子对象也具有子视图。而且我无法进行渲染。

我的$ 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中删除视图声明，则可以看到文本“ This is app.html”。headerAndSearchbar.html仅包含简单的html和css

有任何想法吗？我对此事扑朔迷离-我想念的是什么？

拉迪姆·科勒

有两个问题。

首先，实际上在孩子内部有两种观点'root.app'。

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

这就是说，大多数都在views : {}设置内部声明：

.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
        '[email protected]': { ... 
    }...

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。