Angular UI-Router，父 ui-view 渲染，但带有模板的子视图不渲染答案

【问题标题】：Angular UI-Router, Parent ui-view renders but child view with templates do notAngular UI-Router，父 ui-view 渲染，但带有模板的子视图不渲染
【发布时间】：2015-06-15 04:30:28
【问题描述】：

如果我有 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-router 代码

    $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'
                }
            }
        });

似乎我可能完全错了，不确定上述是否是正确的方法。

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

您的孩子 .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'
            }
        }
    });

【讨论】：

【解决方案2】：

有a working 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>

我们可以使用this plunker，这样重新定义父抽象状态：

$stateProvider
    .state('user', {
        abstract: true,
        data: {
            ...
        },
        views : {
          'home' : {
            template: '<div ui-view=""></div>',
          }
        }
    })

查看文档

View Names - Relative vs. Absolute Names

在幕后，每个视图都被分配了一个遵循 viewname@statename 方案的绝对名称，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系方式。项目。您还可以选择以绝对语法编写视图名称。

例如，前面的例子也可以写成：

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

【讨论】：

我现在得到空白页，没有控制台错误，并且网络选项卡在 GET 请求中显示了两个模板，但浏览器最终只显示一个空白页。我正在尝试获取索引。具有ui-view 的html 称为“home”，以呈现带有一些html 的模板和一个具有ui-view 的容器，称为home_content。主页内容将指向将根据所选菜单项呈现的各种模板。如果我查看源代码，它只是带有ui-view="home" 的 index.html
这是一个正在工作的 plunker plnkr.co/edit/ABAY3AfoNSfZSH8o0ybD?p=preview。它应该显示以上所有内容。好吧，这个 plunker 与我的期望有关...我还将向您展示评论中提到的详细信息的解决方案...另一个在 index.html 中带有 home 的 plunker 添加到答案：plnkr.co/edit/seYHd0CTRnmeTEmMVo9N?p=preview
谢谢你，我终于搞定了。快速提问，我注意到您使用ui-sref 链接到另一个状态？这比href更喜欢吗？我正在做类似#/home 的事情。谢谢！
我会这样说。 ui-sref 在这里作为 API。我们可以有稳定的状态和导航ala ui-sref="myState.Child({paramKey: paramValue})" 而url 定义可以改变。此外，我们可以开始更多地考虑状态，而不是 url。最后，我们甚至可以拥有根本没有定义 url 的状态。也许在这里查看一个示例 stackoverflow.com/a/25591908/1679310 和关于 ui-sref 和 params 在此处发送 stackoverflow.com/q/25647454/1679310
谢谢你，这清楚了！另外，如果我想在一个状态内的多个视图之间切换，我注意到 ui-sref 不起作用 - 错误：无法从状态“user.home”解析“user.invoice”。我有多个视图，应该加载在 home_content 占位符内。对此有什么好的方法？

【解决方案3】：

您正在使您的状态配置变得复杂。只需将您的代码更改为如下所示：

$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'
        }
    }
});

您实际上没有正确使用 @，这是可选的。除非您有正确的视图路径，否则这应该可以工作。

【讨论】：