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

Posted

技术标签:

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

如果我有 index.html 和：

<body> <ui-view="home"></home> </body>

然后在该主视图中，我使用以下内容渲染 frame.html：

&lt;div ui-view="home_content"&gt;&lt;/div&gt;

在我的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'
                
            
        );

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

【问题讨论】：

【参考方案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 的状态。也许在这里查看一个示例 ***.com/a/25591908/1679310 和关于 ui-sref 和 params 在此处发送 ***.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'
        
    
);

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

【讨论】：

以上是关于Angular UI-Router，父 ui-view 渲染，但带有模板的子视图不渲染的主要内容，如果未能解决你的问题，请参考以下文章

使用 ui-router 和 Angularjs 自动滚动到顶部

ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？

Angular 2、TypeScript 和 ui-router - 如何获取状态参数

Angular 1.5，ui-router + 资源 + 组件，stateProvider 找不到组件

ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？

ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？